Question

I’ve managed to get this scroll function to work whereby it scrolls to the top of the div when you stop scrolling, the only problem is, it’s doesn’t do it smoothly at all, it just keeps jumping around and doesn’t work very well.
Here’s my js:

$(document).ready(function(){
        Resize();
        });

        //Every resize of window
        $(window).resize(function() {
            Resize();
        });

        //Dynamically assign height
        function Resize() {
            // Handler for .ready() called.
            var windowHeight = $(window).height() + 'px';
            $('.fill-browser').css('height', windowHeight);
        }

$(function(){
    var _top = $(window).scrollTop();
    var individualDivHeight = $(".fill-browser").height();

    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        var totalHeight = $('body').height();
        var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

        $('html, body').stop().animate({scrollTop: posToScroll}, 200);
    });
});

Also a working fiddle here too to demonstrate what I mean: http://jsfiddle.net/vHAWW/2/

I would like the function to be quite quick when you stop scrolling, but it’s just not smooth at all, can’t seem to figure out why?

Answer 1

I am guessing that the $(window).scroll(function(){ is called recursively by the line:

 $('html, body').stop().animate({scrollTop: posToScroll}, 200);

Could you try to have a flag where you can disable the event from running? ie:

var _top = $(window).scrollTop();
var individualDivHeight = $(".fill-browser").height();
var running = false;

$(window).scroll(function(){

    if(running)
        return;

    running = true;
    var _cur_top = $(window).scrollTop();
    var totalHeight = $('body').height();
    var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

    $('html, body').stop().animate({scrollTop: posToScroll}, {duration:200, complete: function(){running = false;}});
});

Although as you can see this runs directly when i start to scroll. I suggest that you use a timeout or similar:

$(function(){
    var _top = $(window).scrollTop();
    var individualDivHeight = $(".fill-browser").height();
    var running = false;
    var timeout = null;

    $(window).scroll(function(){

        if(running)
            return;

        clearTimeout(timeout);
        timeout = setTimeout(function() {
            running = true;
            var _cur_top = $(window).scrollTop();
            var totalHeight = $('body').height();
            var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

            $('html, body').stop().animate({scrollTop: posToScroll}, {duration:200, complete: function(){running = false;}});
        }, 200);

    });
});

JsFiddle:
jsfiddle.net/HmaWW/