scrollTo div on hover

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.

Roko C. Buljan · Accepted Answer · 2011-11-22T20:42:18.623

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

score 1 · Answer 2 · answered Nov 22 '11 at 19:05

1

I'm pretty sure what you are asking is impossible for this reason:

First you want to have the animation return the top when the user is not hovering over the link BUT you also want to be able to stay on the div when the user LEAVES the link and hovers over the div it scrolled to.

Here is a jsfiddle which does the first part of your question though.

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

I just set the animation time to 0

answered Nov 22 '11 at 19:05

Keith.Abramo

6,952
2
32
46

I guess what functionality we're looking for is something similar to the standard unordered lists with sub-lists to create dropdown menus. The submenu gets accessed by hovering over the parent
, but also stays open when hovering over the submenu itself. I apologize for unclear wording.

scferg5

Nov 22 '11 at 19:12

Those are structured in such a way where the header AND the sub menu are contained in the same wrapper element and there is usually a hover effect which just changes the height of that wrapper element to expose the previously hidden sub menu. This is not possible given your current markup – Keith.Abramo Nov 22 '11 at 19:14

If you want something like that user984008 then here's a fiddle demo of something similar I did earlier today for another question: http://jsfiddle.net/Wxpxq/ – Jeff Wilbert Nov 22 '11 at 19:15

score 1 · Answer 3 · answered Nov 22 '11 at 19:27

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

I made use of $.doTimeout and $.scrollTo for convenience. Also I parsed the number out with a regexp. The timeout is to allow for movement into the div without scrolling back.

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();
});

I see this has some quirks I'm afraid, I will try to solve them when I have the time to do so. — pimvdb, Nov 23 '11 at 08:22

score 0 · Answer 4 · answered Nov 22 '11 at 19:05

0

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

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

answered Nov 22 '11 at 19:05

Jeff Wilbert

4,400
1
20
35

scrollTo div on hover

4 Answers4

DEMO fiddle

EXAMPLE fiddle