ユーザーがクリックしてオーバーレイが表示されるように大きな画像を取り込む画面をカバーするオーバーレイ(通常の画像表示器とは異なりません)を使用してポップアップを作成しました。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
を使用しても、そのようなものが消えていくにつれて、見た目が不調に見えますが、画面の一番上にジャンプして、問題の要素に戻ってきます。
ああcool thanks :) – John