title: jquery remove() jumps back to the top of the page
body: <p>I have written a popup with an overlay (not dissimilar from the usual picture displayers) where the user clicks and an overlay covers the screen which fetches the big picture for display.</p>
  
  <p>The problem is, when the user clicks 'close' my function fades out the picture and overlay then removes them. When I call the <code>.remove()</code> function, the browser then focuses on the body tag and scrolls to the top of the page.</p>
  
  <p>I have attempted a work-around by capturing the <code>offset.top</code> co-ords and storing them in an attribute on the element the user clicks on, and when the popup is closed and after the .<code>remove()</code> function has been called, I use the <code>scrollTo()</code> function to return the correct scroll position (which for some reason overshoots and scrolls the element to the top).</p>
  
  <pre><code>/*creating the popup layer and picture*/
  function newsPopup(obj){
  
      /***PART ZERO - get the timestamp value of this ***/
      var itemID = $(obj).attr('itemID');
      var storyNumber = $(obj).attr('storyNumber');
  
      /*adding the identifier for later*/
      var offset = $(obj).offset();
      var roundedOff = Math.round(offset.top);
      $(obj).attr('scrollMeBack', roundedOff);
  
       /*** the script then continues to create an overlay and picture popup
  }
  
  /*function to remove popup*/
  function overlayRemove(){
      //first fade out the cover and the container
      $("#NEWS_overlay").fadeOut();
      $("#NEWS_centeringContainer").fadeOut();
  
      //then remove it from the page completely
      setTimeout('$("#NEWS_overlay").remove();$("#NEWS_centeringContainer").remove();',400);
  
  
      /*value to scroll the element back to*/
      var scrollBack = $('[SpringCMSscrollMeBack]').attr('SpringCMSscrollMeBack');
      setTimeout('$(window).scrollTop('+scrollBack+')',401); /*notes the 1 millisecond delay here to mean the scroll ahppen after the item has been removed.*/
      $('[scrollMeBack]').removeAttr('scrollMeBack');
  
  }
  </code></pre>
  
  <p>Why is the <code>.remove()</code> function causing the jump back to the top of the page? Even with the <code>scrollTo</code> work around it looks sloppy as the stuff fades out, but jumps up to the top of the screen and then back down to the element in question.</p>