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

Solution 1:

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');
    } elseif (delta < 0) {
        current_section = current_section + 1; //down
        $('body, html').stop().animate({
            scrollTop: $('a[name="section' + current_section + '"]').offset().top
        }, 'slow');
    }
    returnfalse;
});

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)

Solution 2:

There are more problems in your script. First - I think you need to prevent the default behavior of the scroll event, otherwise it will scroll, and you do not want that, as you want to animate scroll yourself.

event.preventDefault() could help and also a return false; at the end of the function.

Then the problem is, that the scroll event is not triggered once, but more times with one mouse scroll. You somehow need to prevent this, as otherwise it happens, that the scroll begins, then you animation starts, but the scroll is still going on, it passes Section 2, and is triggered again and again..

Maybe this script could help - it makes a new event scrollStopped:

jQuery - bind event on Scroll Stop

Generally I would advise you rather to search for a script that does this behavior, becasue programming it yourself can bring you to a lot of problems that other users may have fixed in the past in their plugins.

Solution 3:

I have found some bugs using Spokey's answer, when the page scrolled too much we got a js error, so I added some checks: if the section is the last one, then we needn't raise its number, and the same for scrolling up.

I got this code, but changed this for sections, not anchors:

var current_section = 1;
var min_section = 1;
var max_section = $("section[name]").length;
$(window).mousewheel(function (event, delta) {
    if (delta > 0) {
        current_section = current_section - 1; //upif (current_section < min_section) current_section = min_section;
        $('body, html').stop().animate({
            scrollTop: $('section[name="section' + current_section + '"]').offset().top - 100
        }, 'slow');
    } elseif (delta < 0) {
        current_section = current_section + 1; //downif (current_section > max_section) current_section = max_section;
        $('body, html').stop().animate({
            scrollTop: $('section[name="section' + current_section + '"]').offset().top - 100
        }, 'slow');
    }
    returnfalse;
});

$('body, html').scroll(function(){ returnfalse; }); // allow no scrolling