How can I make jQuery scroll a div (another div) by mouse over the link?

It is very difficult to explain, I know ... especially since I am new to the concept of programming in general.

But I want to follow the link on the right to change the logo so that it matches the link. I want it to liven up, so it scrolls through all the other logos to get there, like what some websites have been doing lately.

All logos are contained in a div, and they all have their own classes (if necessary). The same goes for links.

I'm sure one of you jQuery addicts can figure it out in a few lines of code .. or point me to a tutorial. Help me ask!

EDIT : Well, while the jAndy transfer was very convenient, I focused on how to encode it. Am I doing it right?

<div id="nav">
    <div id="nav_left">
        <h1 class="home"><em>name</em>:home</h1>
        <h1 class="about"><em>name</em>:about</h1>
        <h1 class="folio"><em>name</em>:folio</h1>
        <h1 class="contact"><em>name</em>:contact</h1>
    </div>
    <div id="nav_right">
        <ul>
            <li><a href="#" class="lhome">Home</a></li>
            <li><a href="#" class="labout">About Me</a></li>
            <li><a href="#" class="lfolio">Portfolio</a></li>
            <li><a href="#" class="lcontact">Contact Me</a></li>
        </ul>
    </div>
</div>
+3
source share
3 answers

A simple move will look similar to this example:

$('a.MyAnchorClass').bind('mouseenter', function(){
    $('div.MyDivClassWithLogos').animate({
       'scrollTop':    $('img.MyImgClass').offset().top
    }, 1500);
});

Example: http://jsbin.com/uliti3/2/edit

$(document).ready(function(){
    $('#nav_left').find('h1').each(function(i,v){
       $.data(this, 'pos', $(this).offset());
    });

    $('#nav_right').find('a').bind('mouseenter', function(e){
       var _target = '.' + e.target.className.substr(1);

       $('#nav_left').stop(true, false).animate({
           'scrollTop':  $(_target).data('pos').top
       }, 1500);
    });
});
+4
source

Check out the Ariel Fleslers scrollTo plugin

+1
source

jAndy - , , , ... , , demo

, , div . , click mouseover.

0
source

Source: https://habr.com/ru/post/1751962/


All Articles