title: scrolling to div inside absolute positioned parent div with changing height
body: <p>Here's my body:</p>
  
  <pre><code>body
  {
      height:100%;
      width:100%;
      margin:0;
      padding:0;  
      overflow:hidden;
      overflow-y:hidden;
      -webkit-overflow-scrolling:auto;
     /* aesthetic stuff */
  }
  </code></pre>
  
  <p>Here's the <code>.page</code> div:</p>
  
  <pre><code>.page
  {
      position:absolute; 
      top:0; 
      bottom:0;
      left:0; 
      right:0;
      margin-top:60px;
      z-index:1;
      overflow-y:scroll; 
      -webkit-overflow-scrolling:touch;   
      /* aesthetic stuff */
  }
  </code></pre>
  
  <p>Here's the list item <code>div</code></p>
  
  <pre><code>.item
  {
      position:relative;
      height:80px;
      width:100%;
      margin:0;
      padding:0;
      /* aesthetic stuff */
  }
  </code></pre>
  
  <p>Here's some <code>HTML</code>:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="pages-1" class="page"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><code>.page</code> gets filled dynamically with an unspecified number of these:</p>
  
  <p><code>&lt;div class="item"&gt;Unique Item Content&lt;/div&gt;</code></p>
  
  <p>When you click on an <code>.item</code> div, an unspecified number of other <code>.item</code> divs get <code>.hide()</code> called on them, to filter them out. I then scroll the clicked <code>.item</code> to the top of the <code>window</code>, no problem. </p>
  
  <p>But when you click on the selected <code>.item</code> again, to unselect it, all the <code>.item</code> instances that were previously hidden now get <code>.show()</code> called on them, sending the previously selected, now unselected <code>.item</code> to a new position relative to <code>.page</code> and to <code>window</code>. </p>
  
  <p>I don't have an issue scrolling to the top of selected <code>.item</code> when you first select it. But on <code>.item</code> instances that live toward the bottom of the unfiltered set of <code>.item</code> divs, when you unselect it I cannot get it to scroll to the top of that item <em>at all</em>. I can't even get anywhere close. <strong>EDIT:</strong> When I say I can't get it anywhere close, I mean, it's not even in the viewport by a mile. <strong>END EDIT</strong> Now on <code>.item</code> instances that are <em>not</em> toward the bottom of the set of divs, scrolling to it upon unselect mostly works. But on an <code>.item</code> toward the bottom, not close. </p>
  
  <p>I've tried using its current <code>($(el).position()).top</code> after it is unselected, I've tried storing its original <code>position.top</code> in jQuery <code>data</code> when it is first selected, prior to filtering out the other <code>divs</code>. I've tried combinations of things. </p>
  
  <p>I'm starting to think it's a lost cause. Maybe it has to do with <code>.page</code> being <code>absolute</code> positioned, but I can't change that for other reasons. </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Further tests:</p>
  
  <pre><code>// $('.item.certain-ones').not(el).hide(); or $('.item').not(el).show(); here
  alert($(el).position().top);
  $('.page').scrollTop($(el).position().top);
  alert($(el).position().top);
  </code></pre>
  
  <p>Results:
   - On Select: 140, then 0
   - On Deselect: 0, then 1700</p>
  
  <p>So I tried running the <code>scrollTop</code> twice, to see what shakes out:</p>
  
  <pre><code>// $('.item.certain-ones').not(el).hide(); or $('.item').not(el).show(); here   
  alert($(el).position().top);
  $('.page').scrollTop($(el).position().top);
  alert($(el).position().top);
  $('.page').scrollTop($(el).position().top);
  alert($(el).position().top);
  </code></pre>
  
  <p>Results:</p>
  
  <ol>
  <li>On Select: 140, then 0, then 140</li>
  <li>On Deselect: 1240, then 0, then 1240 (not visible in viewport at
  end)</li>
  </ol>
  
  <p>But...</p>
  
  <p>If after selecting the <code>.item</code>, I manually scroll UP just a little bit, the item stays exactly where it was in the viewport on deselect:</p>
  
  <ol>
  <li>On Select: 140, then 0, then 140</li>
  <li>Scroll up a tad ...</li>
  <li>On Deselect: 73, then 1167, then 73 (perfectly in viewport, as if
  the other elements had not just been shown above and below it; it
  doesn't even move visibly).</li>
  </ol>
  
  <p>However, if I manually scroll DOWN a tad, the results are the same as if I didn't manually scroll at all (see above, e.g., 1240, then 0, then 1240), i.e., not close to being visible in viewport. </p>