Scrolltop function shakes the website when it is scrolled down

Question

I am facing a problem on my website. I have used the following line in my javascript

$('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);

here is my javascript function

$(document).keydown(function(e){
    if (e.keyCode === 39) { 
        var $next, $selected = $(".current");
            $next = $selected.next('li').length ? $selected.next('li') : $first;
            $selected.removeClass("current");
            $next.addClass("current");
            $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);
            showPage(parseInt($next.text())) 
    }
});


$(document).keydown(function(e){
    if (e.keyCode === 37) { 
            var $prev, $selected = $(".current");

            $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
            $selected.removeClass("current");
            $prev.addClass("current");
            $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);
            showPage(parseInt($prev.text())) 

}
    });

So, when I press left or right arrow, it animates and scrolls up to a specified div as its supposed to be. But when I try scrolling down, windows shakes and not letting me scroll down. I am not able to figure the problem and make it smoother.

Update

here is my webpage

please include a sample of your HTML where the classes used in the JS are being used. ( e.g. .single-post-content ) — Ramy Nasr, May 27 '14 at 17:27

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

It sounds like you want a simple catch that will cancel animation on user interaction. Something like this should work:

$(document).on("scroll mousedown DOMMouseScroll mousewheel keydown", function (e) {
    if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel") {
        $('html, body').stop();
    }
});

This was modified from a related issue: let user scrolling stop jquery animation of scrolltop?

edited May 23 '17 at 12:20

Community

1
1

answered May 27 '14 at 17:25

Robert Messerle

3,022
14
18

I tried adding your code. I dont think it worked. Also I have updated my question – Venkateshwaran Selvaraj May 27 '14 at 17:36
I updated my code sample to run `stop` on the correct selector. I tested on your site and it appears to work. – Robert Messerle May 27 '14 at 17:40
Yes, the problem is that the scroll animation is still active while you are trying to scroll which forces a certain offset. if you wait a couple seconds between pressing direction keys and scrolling everything works. using `stop()` seems the right way to go. or make the animation time short `400` instead of `1000` – Ramy Nasr May 27 '14 at 17:42
I think it still kind of wobbling on chrome. On Safari and Firefox it is working fine. – Venkateshwaran Selvaraj May 27 '14 at 17:55

score 0 · Answer 2 · answered May 27 '14 at 17:30

0

I think you can create using this code

$('html, body').animate({scrollTop: $(".single-post-content").height()}, 800);

instead of $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);enter code here

answered May 27 '14 at 17:30

user3624843

175
1
1
8

Scrolltop function shakes the website when it is scrolled down

2 Answers2