web-dev-qa-db-ja.com

ブラウザの戻るボタンをクリックすると、ユーザーが前のページのスクロールした場所に戻る

ブラウザで戻るボタンを押したときに、ユーザーがスクロールダウンしたページの領域にユーザーを戻すことは可能ですか？ --- pageAは画面サイズの2倍です（詳細を読むにはスクロールする必要があります）。 pageAのリンクをクリックして、新しいページpageBに移動します。読んだ後、ブラウザでもう一度クリックします。 pageAに戻ると、トップに戻り、ページの残りの部分を読み続けるためにスクロールダウンする必要があります。

ページ内のそのポイントに戻るJqueryまたはJSの方法はありますか。多分.scrollTop（）で何か？

javascriptjquerybrowserback-button
17
RooksStrife

ページの「ロード」イベントが発生した後にコンテンツがロードされた場合、戻るボタンを押しても元の位置に戻りません。ブラウザは「load」イベントの前にスクロールするためです。

この場合にブラウザにスクロール位置を記憶させるには、移動する前にスクロール位置とステータス（ロードされたコンテンツ）をどこかに保存する必要があります。 CookieまたはURLハッシュのいずれか。

PageAが動的コンテンツのない静的ページ（「load」イベントの後にロードされる）である場合、ブラウザは戻るときにスクロール位置を記憶する必要があります。

動的コンテンツの場合、少なくとも2つの部分が含まれます。 1つは、[戻る]ボタンをクリックしたときにページのステータスを回復することです。そのため、すべての動的コンテンツが読み込まれ、一部のエキスパンダーが展開または折りたたまれます。もう1つはそこまでスクロールします。

最初の部分は、ページの実装方法によって異なります。 2番目の部分は、ページがonUnloadを実行するときに、スクロールトップをCookieに配置できます。例えば

$(window).unload(function() {$.cookie('scrollTop',$(window).scrollTop());});
9
Sheng

セッションストレージを使用してこれを行うことができます。

$(window).scroll(function () {
  //set scroll position in session storage
  sessionStorage.scrollPos = $(window).scrollTop();
});
var init = function () {
   //return scroll position in session storage
   $(window).scrollTop(sessionStorage.scrollPos || 0)
};
window.onload = init;
11
Bowen

次のコードを使用して、スクロール位置を検出できます。

_ $(window).scroll(function (event){
    var scroll = $(window).scrollTop();
    // Do something
 });
_

次に、セッションにスクロールを保存し、戻るときにscrollTop(scroll)を実行します。

5
user254153