2012-02-26 16 views
6

ユーザーがクリックしてオーバーレイが表示されるように大きな画像を取り込む画面をカバーするオーバーレイ(通常の画像表示器とは異なりません)を使用してポップアップを作成しました。jquery remove()はページの先頭にジャンプします

問題は、ユーザーが「閉じる」をクリックすると、私の機能が画像をフェードアウトし、オーバーレイしてから削除されることです。 .remove()関数を呼び出すと、ブラウザはbodyタグにフォーカスし、ページの上部にスクロールします。

私はoffset.topをキャプチャして、ユーザーがクリックする要素の属性にポップアップを閉じ、ポップアップが閉じられ、後にポップアップが閉じられると、回避策を試みました。 remove()関数が呼び出されたとき、私はscrollTo()関数を使用して正しいスクロール位置(何らかの理由でオーバーシュートして要素を上にスクロールする)を返します。

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

} 

なぜ.remove()機能がページの先頭にジャンプする原因ですか? scrollToを使用しても、そのようなものが消えていくにつれて、見た目が不調に見えますが、画面の一番上にジャンプして、問題の要素に戻ってきます。

答えて

関連する問題