Jquery animation on scroll event

Question

I have the following code and if I use it the scroll efect is not working, but if I change the duration from 500 to 50 everything is ok.

$(document).ready(function(){
    currentScrollTop = $( window ).scrollTop();
    $( window ).scroll( scrollWindow );
});
function scrollWindow(){
    var newScrollTop = $( window ).scrollTop();
    var height = $( window ).height();
    if( currentScrollTop > newScrollTop ){
        var newPosition = currentScrollTop - height;
        $( "html, body" ).animate({ scrollTop: newPosition }, 500, function(){
            currentScrollTop = $( window ).scrollTop();
        });
    }
    else if( currentScrollTop < newScrollTop ){
        var newPosition = currentScrollTop + height;
        $( "html, body" ).animate({ scrollTop: newPosition }, 500, function(){
            currentScrollTop = $( window ).scrollTop();
        });
    }
}

I have fiddle here

Answer 1

Two issues here:

1. You never update currentScrollTop .

2. You need to restrict the scroll event from being re-triggered while the page is already scrolling. You can remove the event while the animation is happening by using .off (i've modified your event handler to use .on instead of .scroll for this purpose), and then rebind it when the animation completes.

---

Solution: JSFiddle (I've added an adjustable input for testing, so you can change scroll speed.)

$(document).ready(function(){
    currentScrollTop = $( window ).scrollTop();
    $( window ).on("scroll", scrollWindow );
});

function scrollWindow(){

    var newScrollTop = $( window ).scrollTop();
    var height = $( window ).height();
    console.log(newScrollTop);
    if( currentScrollTop > newScrollTop ){
        var newPosition = currentScrollTop - height;

        //Remove our scroll event during animation
        $(window).off();

        $( "html, body" ).animate({ scrollTop: newPosition }, 500, function(){
            currentScrollTop = $( window ).scrollTop();

             //Rebind event after animation complete
            $( window ).on("scroll", scrollWindow );

        });
    }
    else if( currentScrollTop < newScrollTop ){

        //Remove our scroll event during animation
        $(window).off();

        var newPosition = currentScrollTop + height;
        $( "html, body" ).animate({ scrollTop: newPosition }, 500, function(){
            currentScrollTop = $( window ).scrollTop();

            //Rebind event after animation complete
            $( window ).on("scroll", scrollWindow );

        });
    }

    //Update scrollTop
    currentScrollTop = newScrollTop();

}

Answer 2

If you wait for a while on the fiddle, you can see the scrolling effect working. Actually when the duration parameter of your animate function is 500 it is relatively slower than when it is at 50. So as you move towards higher values, you are slowing down the scroll speed. You can see this doc for reference. Also you can use strings like 'slow' and 'fast' instead of 500 or 50 for your animation duration.

http://api.jquery.com/animate/#duration

Or you can use a timeout. Try this code:-

$(document).ready(function(){
currentScrollTop = $( window ).scrollTop();
var timeout;
$(window).scroll(function() {
clearTimeout(timeout);  
timeout = setTimeout(function() {
    var newScrollTop = $( window ).scrollTop();
var height = $( window ).height();
if( currentScrollTop > newScrollTop ){
    var newPosition = currentScrollTop - height;
    $( "html, body" ).animate({ scrollTop: newPosition }, 500,
function(){
        currentScrollTop = $( window ).scrollTop();
    });
}
else if( currentScrollTop < newScrollTop ){
    var newPosition = currentScrollTop + height;
    $( "html, body" ).animate({ scrollTop: newPosition }, 500,function(){
        currentScrollTop = $( window ).scrollTop();
    });
}

}, 50);});});