title: Knockout Offset Values
body: <p>I'm trying to write a function that scrolls to a list element based on this question:</p>
  
  <p><a href="https://stackoverflow.com/questions/3644927/scroll-a-list-item-such-that-it-becomes-visible">Scroll a list item such that it becomes visible?</a></p>
  
  <p>I had a lot of difficulty with it in my Knockout app, and I eventually discovered the reason why. Here are two Fiddles with the same goToByScroll function:</p>
  
  <p><a href="http://jsfiddle.net/CaptainLexington/tNhLa/57/" rel="nofollow noreferrer">http://jsfiddle.net/CaptainLexington/tNhLa/57/</a></p>
  
  <p><a href="http://jsfiddle.net/CaptainLexington/5wZQ2/108/" rel="nofollow noreferrer">http://jsfiddle.net/CaptainLexington/5wZQ2/108/</a></p>
  
  <pre><code>function goToByScroll(selector) {
      // Scroll
      $('ul#parent').animate({
          scrollTop: $(selector).position().top
      },
          'slow');
  }
  </code></pre>
  
  <p>In the first Fiddle, the HTML is hardcoded and the scroll function works fine. Hurrah!</p>
  
  <p>In the second Fiddle, the list items are generated by Knockout. The scroll function's behavior is goofy. Open up the console and click on each list item and you will discover why: the jQuery.offset().top values seem to bear very little relation to where they actually are. In the hardcoded version, the offset().top values are monotonically increasing; in the Knockout version, they are either arbitrary or cyclical.</p>
  
  <p>So, is there any way around this? Is this a bug in Knockout or an unfortunate but unavoidable side-effect of the implementation of their functionality? Is it worth reporting it to Knockout, or should I decide on some other feature for my app?</p>