title: scroll to top of newly generated div
body: <p>So in my site, when a button is clicked,I dynamically generate a div, which contains a grid of images. It goes like this:</p>
  
  <pre><code>$('.prod-images').click(function(){
     var prodImages = generateProdImagesGrid(this);
     $('#prod-images-grid').html(prodImages).show();
  });
  </code></pre>
  
  <p>This works fine. And I have another button which will close this div on click.</p>
  
  <p>Now this div can be taller than the screen and require vertical scrolling. The problem is that because of all the CSS/styles in this page, this div always opens only at the scroll position where it was closed. So when I open it first time, it is scrolled to the top and everything is fine. Now, suppose I scroll this div halfway down and then close it. Next time when it is opened, it opens at that scroll position.</p>
  
  <p>I tried doing:</p>
  
  <pre><code>$('#prod-images-grid').html(prodImages).scrollTop(0).show();
  </code></pre>
  
  <p>This does not work (at least in chrome) because the div is not fully rendered when the scrollTop() call is executed.</p>
  
  <p>The only way I can make this work is to give a long delay between the div rendering and the scrollTop call like so:</p>
  
  <pre><code>$('#prod-images-grid').html(prodImages).show();
  window.setTimeout(function(){
    $('#prod-images-grid').scrollTop(0);
  },10000); //call scrollTop after 10 seconds
  </code></pre>
  
  <p>As you can imagine, this is not at all a good solution. Does anyone have any suggestions on how I can render the div so that when its visible, it is scroll to its top position?</p>