jQuery scroll function keeps jumping

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?

Are you trying to make a forever-scrollable pane? Because I tried that. It is very difficult and requires a lot of code tuning, and I never really did get it quite right... — OneChillDude, Jan 23 '13 at 23:24

score 3 · Accepted Answer · answered Jan 23 '13 at 23:34

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/

actually I do have one small question about this actually, it works great, perfect in fact but once the browser window is resized, the scroll still snaps to the original div size, is there anyway of that adjust with the browser window size too? — user1374796, Jan 24 '13 at 13:08
Yep, by moving the row `var individualDivHeight = $(".fill-browser").height();` into the `$(window).scroll` function, (preferrable after the `if(running) return;`). But in this case, you should also run the code for scroll when the window is resized. [jsfiddle](http://jsfiddle.net/XyJ28/1/) — Robert Fricke, Jan 24 '13 at 13:23
nice one, works great! Thank you! It is a bit buggy on the iPhone / iPad though, jumps upwards a few divs sometimes instead of snapping to the current div, don't know if there's a reason for this? — user1374796, Jan 24 '13 at 19:36

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

I would recommend preventing the scrollTop function from running while the user is scrolling themselves. Having searched a little bit I found this nice fiddle from another stack question. This is using the scroll option with a plugin called debounce.

$(window).scroll($.debounce( 250, function(){
    //Your scrollTop function
}));

edited May 23 '17 at 12:30

Community

1
1

answered Jan 23 '13 at 23:32

dev

3,969
3
24
36

jQuery scroll function keeps jumping

2 Answers2