CODEWITHSUNDEEP
jqueryhtmlcross-browser
gondai yosuke
gondai yosuke

Reputation: 609

jQuery flicker when using animate-scrollTo

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:

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

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

Upvotes: 32

Views: 18354

Answers (4)

Henrikh
Henrikh

Reputation: 168

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

Upvotes: 0

cutme
cutme

Reputation: 11

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?

Upvotes: 1

ggzone
ggzone

Reputation: 3711

<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

Upvotes: 7

cleay
cleay

Reputation: 836

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");
});

Upvotes: 82

Related Questions