Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 613
gondai yosuke Avatar asked May 16 '12 08:05

gondai yosuke


1 Answers

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"); }); 
like image 168
cleay Avatar answered Oct 06 '22 09:10

cleay