title: How to make jquery animate work fluently?
body: <p>I have this code inside my html page.</p>
  
  <pre><code>  $('#buttonMenu').on('click',function(){
      var errDiv = $("#divWhichToMoveTo");
      errDiv.show();
      var pos = errDiv.position().top;
      $("html, body").animate({ scrollTop: pos });
    });
  
  
    &lt;li&gt;&lt;a id="buttonMenu" title="Yea" alt="Yea" href="#"&gt;Yea&lt;/a&gt;&lt;/li&gt;
  
    &lt;div id="divWhichToMoveTo"&gt;&lt;strong&gt;An error occured, oh noes!!&lt;/strong&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It is supposed to make the page scroll down (gently) to the point where is the "divWhichToMoveTo" when the user hit the "buttonMenu". It works, but i have several button and several div within a long page. Sometimes passing from one to another in differente points of the html page, i can see, for a millisecond,  the beginning of the html page before the animation starts and bring me from the point where i am to the point where i want to land. I'm missing something?</p>