title: Scroll smoothly to specific element on page
body: <p>I want to have 4 buttons/links on the beginning of the page, and under them the content.</p>
  
  <p>On the buttons I put this code:</p>
  
  <pre><code>&lt;a href="#idElement1"&gt;Scroll to element 1&lt;/a&gt;
  &lt;a href="#idElement2"&gt;Scroll to element 2&lt;/a&gt;
  &lt;a href="#idElement3"&gt;Scroll to element 3&lt;/a&gt;
  &lt;a href="#idElement4"&gt;Scroll to element 4&lt;/a&gt;
  </code></pre>
  
  <p>And under links there will be content:</p>
  
  <pre><code>&lt;h2 id="idElement1"&gt;Element1&lt;/h2&gt;
  content....
  &lt;h2 id="idElement2"&gt;Element2&lt;/h2&gt;
  content....
  &lt;h2 id="idElement3"&gt;Element3&lt;/h2&gt;
  content....
  &lt;h2 id="idElement4"&gt;Element4&lt;/h2&gt;
  content....
  </code></pre>
  
  <p>It is working now, but cannot make it look more smooth.</p>
  
  <p>I used this code, but cannot get it to work.</p>
  
  <pre><code>$('html, body').animate({
      scrollTop: $("#elementID").offset().top
  }, 2000);
  </code></pre>
  
  <p>Any suggestions? Thank you.</p>
  
  <p>Edit: and the fiddle: <a href="http://jsfiddle.net/WxJLx/2/" rel="noreferrer">http://jsfiddle.net/WxJLx/2/</a></p>