cameronjonesweb cameronjonesweb - 4 months ago 15
Javascript Question

JQuery Jump to Anchors on Scroll

Aiming to do something similar to this where the page jumps to anchors on the page when you scroll down. I'm no expert with JQuery or JS in general (backend languages PHP and MySQL are my areas of preference) I grabbed a couple of scripts and put them together. There will be three anchors on the page, so it's meant to jump to the next one down when you scroll down and the next one up when you scroll up. However, when it scrolls to the second one it keeps scrolling past it even when I'm not still scrolling. This is the script:

var section = 1;

function scrollToAnchor(variable){
var aTag = $("a[name='"+ variable +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$(function(){
//Keep track of last scroll
var lastScroll = 0;
$(window).scroll(function(event){
//Sets the current scroll position
var st = $(this).scrollTop();
//Determines up-or-down scrolling
if (st > lastScroll && section < 3){
//Going down
section = section + 1;
scrollToAnchor('section'+section);
lastScroll = st;
} else if(st < lastScroll && section > 1){
//Going up
section = section - 1;
scrollToAnchor('section'+section);
lastScroll = st;
}
//Updates scroll position
lastScroll = st;
});
});


And the fiddle: http://jsfiddle.net/tBN64/4/

Answer

The reason is that when you scroll the scroll event is fired and then the animate function is scrolling to the element, but that animated scroll itself will fire the scroll event again resulting in a loop.

I suggest you try a different approach. You can for example catch the mousewheel direction and use that to scroll to the next element.

Example using the jQuery Mousewheel Plugin https://github.com/brandonaaron/jquery-mousewheel

var current_section = 1;
$(window).mousewheel(function (event, delta) {
    if (delta > 0) {
        current_section = current_section - 1; //up
        $('body, html').stop().animate({
            scrollTop: $('a[name="section' + current_section + '"]').offset().top
        }, 'slow');
    } else if (delta < 0) {
        current_section = current_section + 1; //down
        $('body, html').stop().animate({
            scrollTop: $('a[name="section' + current_section + '"]').offset().top
        }, 'slow');
    }
    return false;
});

Fiddle: http://jsfiddle.net/tBN64/6/ (the above code is at the end)

NOTE: This code does not verify if there is a next section, so if you scroll to much it will throw an error. You need to make sure the next element exists / if it doesn't don't animate to it. (see console for errors, usually if you press F12 in your browser)