jQuery flicker when using animate-scrollTo

Question

I have a problem with the scrollTo function when it is called by a jQuery animate function.

Here my code:

$("#button").click(function(){
    $("body").animate({scrollTop: 1400},"slow");
});

When I click the button, the flicker appears before the body scrolling. For example, I'm on (scroll position) 1000, and when I clicked the button the following happened:

page/image on (scroll position) 1400 appears, it looks like I have already gone to (position) 1400
then it moves again to (position) 1000, this happens so fast and looks like a flicker
finally it scrolls to 1400 like a normal scroll..

On firefox it always appears, and sometimes on chrome also.

Please provide a link to the scrollTo plugin for those needing it. — Mark Schultheiss, May 16 '12 at 12:17
this is the sample. http://demos.flesler.com/jquery/scrollTo/ and this is where i got the plugin. http://flesler.blogspot.com/2007/10/jqueryscrollto.html — gondai yosuke, May 21 '12 at 03:01
solved (probably). I use scrollTo plugin for detect hash tag, and when the button was clicked, i set it return true so the hash appear on the link and make the browser move to the selected id first before animated. i set it as false again and now it animate normaly. — gondai yosuke, May 29 '12 at 07:16

score 82 · Accepted Answer · edited Dec 07 '12 at 22:22

82

I had the same flickering problem. It was caused by the hash anchor in the link that triggers the function. Fixed it with preventDefault():

$("#button").click(function(e){
    e.preventDefault();
    $("body").animate({scrollTop: 1400},"slow");
});

edited Dec 07 '12 at 22:22

Jeshurun

22,940
6
79
92

answered Aug 26 '12 at 20:36

cleay

836
8
3

7

Just to clarify: The problem is caused, because (1) the browser executes the jump to the anchor (2) then jQuery jumps back and scrolls slow to the anchor. – Martin Thoma Feb 24 '15 at 17:58
1

Thx, this solves my problem too. But what if i use this in multiple dropdown menus, to scroll to the next one and the last one has an active anchor. This will stop from redirecting to href. – MichalCh Mar 24 '16 at 12:25

score 7 · Answer 2 · answered Dec 16 '14 at 15:03

7

<a href="#" onclick="return scrollFromTop(1400, 2000);">scroll</a>

function scrollFromTop(offset, duration) {
    $('body').stop(true).animate({scrollTop: offset}, duration);
    return false;
});

had the same problem... fixed it by returning false on the click handler

answered Dec 16 '14 at 15:03

ggzone

3,661
8
36
59

My problem got fixed after using .stop(true). – Sri May 14 '15 at 01:39

score 1 · Answer 3 · edited May 23 '17 at 12:26

solved this problem by stopping the animation like this:

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function(e){
            if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove"){
                $("html,body").stop();
            }
        })

found there: Jquery .animate() stop scrolling when user scrolls manually?

score 0 · Answer 4 · answered Sep 25 '21 at 17:49

0

Had the same problem while using "barryvdh/laravel-debugbar" package in laravel project. If that's your case, disable it.

answered Sep 25 '21 at 17:49

Henrikh

150
2
3
11

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 25 '21 at 21:08

jQuery flicker when using animate-scrollTo

4 Answers4

Linked