title: jQuery: Target position "changes" when scrolling to position within a <div>
body: <p>I already tried to have a look at similar questions, but they all don't quite answer my question. The following code works well for scrolling $('html,body'), but it does not work when I replace it with $('#my-div').</p>
  
  <p>I prepared a fiddle, if you would like to play around a little: <a href="http://jsfiddle.net/Q2Suw/" rel="nofollow">http://jsfiddle.net/Q2Suw/</a> - To test my problem, press the button "Two" or "Three" multiple times (or press "Two" and then "Three").</p>
  
  <p><strong>The Code:</strong></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#test-me{
    width:100%; 
    height:120px; 
    position: relative; 
    overflow:auto;
    border:1px solid silver;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="test-me"&gt;
      &lt;h1  id="one"&gt;One&lt;/h1&gt;
      &lt;p&gt;...&lt;/p&gt;
      &lt;h1 id="two"&gt;Two&lt;/h1&gt;
      &lt;p&gt;...&lt;/p&gt;
      &lt;h1 id="three"&gt;Three&lt;/h1&gt;
      &lt;p&gt;...&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;p&gt;
      &lt;button data-target="#one"&gt;One&lt;/button&gt; 
      &lt;button data-target="#two"&gt;Two&lt;/button&gt;  
      &lt;button data-target="#three"&gt;Three&lt;/button&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('button').on('click', function() {
  
      var target = $(this).attr('data-target');
  
      var targetPosition  = $(target).position(); 
  
      $('#test-me').animate({
          scrollTop : targetPosition.top
      }, 425);
  
  });
  </code></pre>
  
  <p>As I already said, it works for:</p>
  
  <pre><code>$('html,body').animate({
    scrollTop : targetPosition.top
  }, 425);
  </code></pre>
  
  <p>So, why doesn't it work for the position:relative-div? Help is very much appreciated! :) I will let everyone know, if I manage to solve this problem.</p>