jquery remove() jumps back to the top of the page

Question

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.

The problem is, when the user clicks 'close' my function fades out the picture and overlay then removes them. When I call the .remove() function, the browser then focuses on the body tag and scrolls to the top of the page.

I have attempted a work-around by capturing the offset.top co-ords and storing them in an attribute on the element the user clicks on, and when the popup is closed and after the .remove() function has been called, I use the scrollTo() function to return the correct scroll position (which for some reason overshoots and scrolls the element to the top).

/*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');

}

Why is the .remove() function causing the jump back to the top of the page? Even with the scrollTo 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.

Answer 1

See How can I remove the location hash without causing the page to scroll? ;

Alternatively, you can return false; to stop this behavior...