CODEWITHSUNDEEP
javascriptjqueryscrollto
scferg5
scferg5

Reputation: 2013

scrollTo div on hover

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.

Upvotes: 4

Views: 1169

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

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

Upvotes: 3

pimvdb
pimvdb

Reputation: 154958

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

Upvotes: 1

Keith.Abramo
Keith.Abramo

Reputation: 6965

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

Upvotes: 1

Jeff Wilbert
Jeff Wilbert

Reputation: 4520

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

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

Upvotes: 0

Related Questions