Question

I asked this question and the answer works really well.

The only thing though is that now I need a version that scrolls directly to the respective div instead of scrolling through all of them (i.e. if you hover over the last link, it won’t scroll through 6 former divs to get to it).

It still needs to return to the first div when you aren’t hovering over the link.

Also, it would be most ideal if there was also a way to stay on that div if you hover over it as well as its link. As of now, the div is not intractable because when you hover over it and leave its link, it scrolls away.

Thanks.

Answer 1

Try that way:

DEMO fiddle

var flag = false,
    goto = 0,
    hre;

    $('#nav li a').bind('mouseenter mouseleave', function(e) {
        if (e.type === 'mouseenter') {
           flag = true;
           hre = $(this).attr('href');
           goto = $(hre).position().top;
           $('#sections').stop().animate({top : '-'+goto },800);  
        } else {
           flag = false;

            setTimeout(function() {
               if( flag != true ){
                  $('#sections').stop().animate({top : '0' },800);  
               }      
            }, 1000);  
        }
    });

$('#sections').mouseenter(function(){
   flag = true;
});

After you hover an anchor, go fast into the ‘wrapper’ and it won’t go back to the 1st slide.

---

BTW… why you just don’t create something more… practique? 🙂

EXAMPLE fiddle