Jumpy scroll after scroll-animation with javascript

Question

I have a problem with the scrolling animation. Jumpy scroll occurs when the page is scrolled after scroll-animation. I suspected the scroll-event repeats itself, but I'm not sure. Can you help me with it?

$(document).ready(function(){
var offset;
var anchor = $("#navigation").offset().top;  
$(window).bind('mousewheel', function (e) {
offset = $(window).scrollTop();

if (e.originalEvent.wheelDelta < 0) {
    //mouse scroll down
    console.log('Down: ' + offset + " " + anchor);

    if (offset >= anchor) {
        // if anchor has been scrolled, user can scroll further
        // the problem ocuurs in this block
        return true;
    } else {
        // animate to anchor( nav menu)
        $("body, html").animate({
            scrollTop: anchor + 1
        }, 200);
        $("#navigation").addClass("nav-fixed");
        return false;
    }
} else {
    //mouse scroll up
    if (offset < anchor) {
        $("#navigation").removeClass("nav-fixed");
        return true;
    }
}});

});

JSFiddle: http://jsfiddle.net/0noms3cs/

Thank you a lot!

Answer 1

Your issue is simple. The scroll event fires over and over again. Your line of thinking behind the cause of this issue is correct, you have a large number of animate events that get stacked up which causes this weird behavior.

You can resolve this issue by adding a boolean variable (such as scrollInitialized ) that starts out as false and gets flipped to true once the scroll event has fired once.

Here's the altered JS code. Note: I only added the scrollInitialized variable and a check for it in the if statement.

Edit : I also removed the inner if-else case since it was not necessary using this design.

EDIT 2 : I originally misunderstood what you wanted to do. What you need to do was add a scrollLock variable that would only be set to true for the duration of your animation. After thinking about this, I implemented it for you. Here is the Jsfiddle:

https://jsfiddle.net/04gaaapo/1/

Here is the new JS code:

$(document).ready(function () {

    var scrollLock = false;
    var offset;
    var anchor = $("#navigation").offset().top;

    $(window).bind('mousewheel', function (e) {
        offset = $(window).scrollTop();

        // if scroll is NOT locked and we are above the anchor
        if (scrollLock === false && offset < anchor) {
            if (e.originalEvent.wheelDelta < 0) {
                // scrolling down
                scrollLock = true;

                // animate to anchor( nav menu)
                $("body, html").animate({
                    scrollTop: anchor + 1
                }, 200);

                // unlock in 250ms
                setTimeout(toggleLock, 250);

                // add nav class
                $("#navigation").addClass("nav-fixed");

            } else if (e.originalEvent.wheelDelta > 0) {
                // scrolling up
                scrollLock = true;

                // animate to top of page
                $("body, html").animate({
                    scrollTop: 0
                }, 200);

                // unlock in 250ms
                setTimeout(toggleLock, 250);

                // remove nav class
                $("#navigation").removeClass("nav-fixed");

            }
        }

    });

    function toggleLock() {
        scrollLock = !scrollLock;
    };

});