title: Strange behavor using scrollTop
body: <p>I've a strange behavor using scrollTop JQuery function. I've a div that contains a complex text divided in different sections like this:</p>
  
  <pre><code>&lt;div id="wrapper" ... &gt;
      &lt;div id="section1"&gt;
          &lt;h1&gt;Section 1&lt;/h1&gt;
          Lorem ipsum dolor sit amet, consectetuer... 
          ...
      &lt;/div&gt;
      &lt;div id="section2"&gt;
          &lt;h1&gt;Section 2&lt;/h1&gt;
          Lorem ipsum dolor sit amet, consectetuer... 
          ...
      &lt;/div&gt;
      &lt;div id="section3"&gt;
          &lt;h1&gt;Section 3&lt;/h1&gt;
          Lorem ipsum dolor sit amet, consectetuer... 
          ...
      &lt;/div&gt;
      ...
  </code></pre>
  
  <p>a second DIV contains a simple list of sections and when user click on each of them I want wrapper scroll at the right section:</p>
  
  <pre><code>&lt;li&gt;
     &lt;a href="#" onclick="customScrollTo('section1')"&gt;section1&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
     &lt;a href="#" onclick="customScrollTo('section2')"&gt;section2&lt;/a&gt;
  ...
  </code></pre>
  
  <p>and this is simple the JS function:</p>
  
  <pre><code>function customScrollTo (section) {
  
       $('#wrapper').animate({
           scrollTop: $("#wrapper div[id='" + section + "']").offset().top
       }, 200);
  };
  </code></pre>
  
  <p>now if you try to test it in this JSfiddle:
  <a href="http://jsfiddle.net/Ws5F9/4/" rel="nofollow">http://jsfiddle.net/Ws5F9/4/</a></p>
  
  <p>you can see two strange behavors:</p>
  
  <ol>
  <li>if you click 'section 1' than 'section 2' than 'section 3', section 3 doesn't work!</li>
  <li>if you click twice on the same section link, the second time it scroll at page top</li>
  </ol>