title: Scrolling not working on page reload - Angular ng-repeat bug?
body: <p>I'm having a weird bug with Angular.</p>
  
  <p>Here's the context: The page loads with everything fitting in the window. The user clicks on something and a bunch more content loads. An ng-repeat pushes the document height below the fold, the vertical scrollbar appears, and the user can scroll down to view the rest of the content. Everything works.</p>
  
  <p>If I scroll to the bottom, and then refresh the page, the scroll position jumps back to the top of the page and everything is reset. If I click to load the additional content again, it shows up, but the scroll is 'locked'. The scrollbar still appears, but scrolling with the scrollwheel is impossible.</p>
  
  <p>All the site functionality works, but I cannot scroll down with the mouse (or using the arrow keys). If I click and drag the scrollbar down, it fixes the issue and scrolling is restored.</p>
  
  <p>To make matters worse, the bug only happens about 10% of the time. The rest of the time, the page happily scrolls just fine.</p>
  
  <p><strong>Some clues I've found:</strong></p>
  
  <p>Inside the Angular controller, I added the following:</p>
  
  <pre><code>console.log( $(window).scrollTop() );
  </code></pre>
  
  <p>This snippet logs whatever the scrollTop value was <em>before</em> the page load. It logs this every time, even the times when scrolling works fine. </p>
  
  <p>Even more confusingly, in the HTML itself, I added the following event listener:</p>
  
  <pre><code>$(window).on("scroll", function(e) {
    console.log("Scroll event logged. Current scroll position: ", $(window).scrollTop());
  })
  </code></pre>
  
  <p>This consistently logs, on page load, that a scroll event was detected, and that the scrollTop is now 0.</p>
  
  <p>Even more confusingly, sometimes, when the scrolling does work and the additional content is added, it jumps me straight to the bottom, as if I started scrolling from the bottom.</p>
  
  <p><strong>What I think is happening</strong></p>
  
  <p>I think when the page reloads, it retains its now-impossible scrollTop value. Since the scrollTop is below the document height, the browser tries to scroll back up to zero, but this mechanism is buggy and unpredictable.</p>
  
  <hr>
  
  <p>Does anyone know a surefire way to reset the scroll position to the top of the page, on page load? Simply using $(window).scrollTop(0) isn't working. I'm hoping someone understands the lower levels of this mechanism (or knows another way around it).</p>
  
  <p>I've tried a number of dirty hacks (like scrolling the window by 1px when the additional content gets loaded), and nothing seems to be working. I've been stuck on this for a couple hours now and it's driving me a bit insane.</p>
  
  <p>Also, I'd love to put this in a JSFiddle, but since you can't refresh a JSFiddle page without losing all the code (or having it reset to a non-running state), it wouldn't work. Sorry!</p>