ScrollTo div on hover

Question

I asked this question and the answer works very well.

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

Still need to go back to the first div when you do not hover over the link.

Furthermore, it would be ideal if there was also a way to stay on this div if you hover over it, as well as its link. At the moment, the div is not unsolvable, because when you hover over it and leave a link, it scrolls.

Thanks.

Answer 1

Try the following:

Demo violin

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 anchor, quickly go to the "wrapper", and he will not return to the 1st slide.

---

By the way ... why don't you just create something more ... practicing? :)

Script example

Answer 2

I am sure that what you are asking is not possible for this reason:

First, you want the animation to return to the top when the user does not hover over the link, but you also want to be able to stay on the div when the user EXITs the link and is hovering over a scrollable div.

Here is the jsfiddle that does the first part of your question.

http://jsfiddle.net/YWnzc/8/

I just set the animation time to 0

Answer 3

Just move the elements before the animation: http://jsfiddle.net/YWnzc/12/ .

I used $.doTimeout and $.scrollTo for convenience. I also made out the regexp number. Timeout is the ability to move to a div without scrolling backward.

 var current, prev; jQuery( "#nav").delegate( "a", "mouseenter mouseleave", function(e){ var i, self = this, pos; if( e.type == "mouseleave" ) { i = 1; } else { i = $(this).attr("href").match(/(\d)$/)[1]; } //stop the previous animation, otherwise it will be queued if(e.type === "mouseleave") { var elem = $("#section1").insertBefore(current); elem = $("#section1"); $.doTimeout("test", 500, function() { current = $("#section1"); jQuery("#wrapper").scrollTo(elem, 250); }); } else { var elem = $("#section" + i); elem.insertAfter(current || "#section1"); current = elem; $.doTimeout("test"); jQuery("#wrapper").scrollTo(elem, 250); } }); jQuery( "#wrapper").on("mouseover", function() { jQuery( "#wrapper").stop(); }); 

Answer 4

Just remove the animation scroll and make a direct call to scrollTop()

Demo Screenshot: http://jsfiddle.net/YWnzc/9/