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
– Mark Schultheiss, Commented May 16, 2012 at 12:17
this is the sample. demos.flesler.com/jquery/scrollTo and this is where i got the plugin. flesler.blogspot.com/2007/10/jqueryscrollto.html — gondai yosuke
– gondai yosuke, Commented May 21, 2012 at 3: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
– gondai yosuke, Commented May 29, 2012 at 7:16

Jeshurun · Accepted Answer · 2012-12-07 22:22:11Z

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 7, 2012 at 22:22

Jeshurun

23.2k6 gold badges82 silver badges92 bronze badges

answered Aug 26, 2012 at 20:36

cleay

8368 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Thoma Over a year ago

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.

MichalCh Over a year ago

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.

ggzone · Accepted Answer · 2014-12-16 15:03:38Z

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, 2014 at 15:03

ggzone

3,7198 gold badges39 silver badges59 bronze badges

1 Comment

Sri Over a year ago

My problem got fixed after using .stop(true).

Community · Accepted Answer · 2017-05-23 12:26:08Z

1

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?

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Aug 27, 2016 at 0:34

cutme

111 bronze badge

Comments

Henrikh · Accepted Answer · 2021-09-25 17:49:48Z

0

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

answered Sep 25, 2021 at 17:49

Henrikh

1682 gold badges3 silver badges12 bronze badges

1 Comment

Community Over a year ago

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.

Collectives™ on Stack Overflow

jQuery flicker when using animate-scrollTo

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related