現在のWebページのスクロール位置を取得および設定するにはどうすればよいですか?
ユーザーのアクション/入力に基づいて更新する必要がある長いフォームがあります。これが発生すると、ページが一番上にリセットされます。これは、ユーザーがスクロールして元の位置に戻る必要があるため、ユーザーにとって煩わしいものです。
ページが再読み込みされる前に(非表示の入力で)現在のスクロール位置をキャプチャできれば、再読み込み後に元の位置に戻すことができます。
現在のWebページのスクロール位置を取得および設定するにはどうすればよいですか?
ユーザーのアクション/入力に基づいて更新する必要がある長いフォームがあります。これが発生すると、ページが一番上にリセットされます。これは、ユーザーがスクロールして元の位置に戻る必要があるため、ユーザーにとって煩わしいものです。
ページが再読み込みされる前に(非表示の入力で)現在のスクロール位置をキャプチャできれば、再読み込み後に元の位置に戻すことができます。
回答:
あなたはそのdocument.documentElement.scrollTop物件を探しています。
getScrollingPosition()隠し変数に値を格納するようにを変更しました。次に、私が使用する更新されたページのhtmlで、<body onLoad="window.scrollTo(x,y)xとyは非表示の値の値です!
document.documentElement.scrollTop常に0を返していることを発見document.body.scrollTopしました。しかし、動作するようです。一方、Ubuntu上の1つのFirefoxはその逆です。bodyつまり、で0を、正しい量でを取得しdocumentElementます。何がわかるのですか?
scrollTopプロパティはすべてのブラウザで機能するわけではないため、この答えは正確ではありません。チェックwindow.pageXOffsetしてwindow.pageYOffset、より良い結果を得るため。
現在受け入れられている答えは正しくありませdocument.documentElement.scrollTopん-Chromeでは常に0を返します。これは、WebKit bodyがスクロールの追跡に使用するのに対し、FirefoxとIEはを使用するためhtmlです。
現在の位置を取得するには、次のようにします。
document.documentElement.scrollTop || document.body.scrollTop
次のように、ページの現在の位置を1000pxに設定できます。
document.documentElement.scrollTop = document.body.scrollTop = 1000;
または、jQueryを使用します(作業中にアニメーション化します)。
$("html, body").animate({ scrollTop: "1000px" });
window.pageYOffsetを使用している場合、提案はよりクリーンです。window.scrollBy()window.scrollTo()
ブラウザが現在のウィンドウスクロール座標をどのように公開するかには、いくつかの不整合があります。またはjQuery を使用すると、MacおよびiOS上のGoogle Chromeは常に戻るようです。0document.documentElement.scrollTop$(window).scrollTop()
ただし、以下と一貫して機能します。
// horizontal scrolling amount
window.pageXOffset
// vertical scrolling amount
window.pageYOffset
私はHTML5ローカルストレージソリューションを使用しました...すべてのリンクはwindow.locationを変更する前にこれを設定する関数を呼び出します:
localStorage.topper = document.body.scrollTop;
そして、各ページの本文のonLoadにこれがあります:
if(localStorage.topper > 0){
window.scrollTo(0,localStorage.topper);
}