web-dev-qa-db-ja.com

戻るボタンを押したときに、スクロール可能な領域のスクロール位置を保持するにはどうすればよいですか？

大きなスクロール可能なdiv内に長いリンクのリストがあります。ユーザーがリンクをクリックしてから[戻る]ボタンをクリックするたびに、divの最上部から開始します。ユーザーにとって使いやすいものではありません。戻るボタンを押したときにブラウザを前の位置にスクロールさせる方法はありますか？

どうもありがとうございました！

javascriptjqueryhtmlgoogle-chromebrowser
19
user2335065

ページのアンロード中に、スクロール位置を取得してローカルストレージに保存します。次に、ページの読み込み中にローカルストレージを確認し、そのスクロール位置を設定します。 id elementのdiv要素があると仮定します。ページの場合は、セレクターを変更してください:)

$(function() {
   $(window).unload(function() {
      var scrollPosition = $("div#element").scrollTop();
      localStorage.setItem("scrollPosition", scrollPosition);
   });
   if(localStorage.scrollPosition) {
      $("div#element").scrollTop(localStorage.getItem("scrollPosition"));
   }
});
20
mohamedrias

ページごとにスクロールデータを保存する必要があると思います。また、ローカルストレージは同じOriginのすべてのタブとウィンドウ間で共有されますが、セッションストレージは現在のタブのみに影響するため、ローカルストレージの代わりにセッションストレージを使用する必要があります

$(function () {
            var pathName = document.location.pathname;
            window.onbeforeunload = function () {
                var scrollPosition = $(document).scrollTop();
                sessionStorage.setItem("scrollPosition_" + pathName, scrollPosition.toString());
            }
            if (sessionStorage["scrollPosition_" + pathName]) {
                $(document).scrollTop(sessionStorage.getItem("scrollPosition_" + pathName));
            }
        });
5
Jondi

window.history.back()を使用する場合、これは実際にはデフォルトのブラウザ機能です ユーザーSDが指摘したように 。

現在作成中のサイトで、会社のロゴをインデックスページにバックリンクしたかった。 jQuery 3以降、$(window).unload(function()は$(window).on('unload', function()に書き換える必要があります。私のコードは次のようになります（Kirby CMSのphp構文を使用）：

<?php if ($page->template() == 'home'): ?>

<script>

$(function() {
 $(window).on("unload", function() {
    var scrollPosition = $(window).scrollTop();
    localStorage.setItem("scrollPosition", scrollPosition);
 });
 if(localStorage.scrollPosition) {
    $(window).scrollTop(localStorage.getItem("scrollPosition"));
 }
});

</script>
2
bruno

固定メニューdivとスクロールドキュメントdivで構成される単純なユーザーインターフェイス（以下のコード例の「pxeMainDiv」）でも同じ問題が発生しました。次の解決策はChrome 47.0.2526.106 mおよびFirefox 43.0.3で機能しました。私のアプリケーションは社内で使用するため、IEの古いバージョンに対応する必要はありませんでした） 。

$(document).ready(function(){
    if (history.state) {
       $("#pxeMainDiv").scrollTop(history.state.data);
    }
    $("#pxeMainDiv").scroll(function() {
       var scrollPos = $("#pxeMainDiv").scrollTop();
       var stateObj = { data: scrollPos };
       history.replaceState(stateObj, "");
    });
});

Div scrollイベントでは、divのスクロール位置は、ブラウザー履歴オブジェクト内の状態オブジェクトに保存されます。戻るボタンを押した後、ドキュメントの準備イベントで、divのスクロール位置がhistory.stateオブジェクトから取得した値に復元されます。

このソリューションは、リンクの任意の長さのチェーンの逆ナビゲーションに対して機能するはずです。

ここのドキュメント： https://developer.mozilla.org/en-US/docs/Web/API/History_API

2
G Stokes

戻るボタンが履歴の一種である場合戻るボタンwindow.history.back()次に、探しているのはデフォルトのブラウザ機能です。だから、あなたはそれを心配する必要はありません。

戻るボタンが実際にリンクまたはフォームを介してアプリケーションのURLを指している場合は、手動で注意する必要があります。

解決策として、Cookieを使用してページスクロール値を保存できます。ユーザーがページをスクロールするたびに、そのページのスクロール値をCookieに保存します。追加の作業は、手動のCookie管理に適用されます。

window.onScroll = function(){
    document.cookie="pageid=foo-"+window.scrollY+";";
}

このCookie値を使用して、ページ訪問時にページのスクロール値を設定できます。

window.scroll(0,cookievalue);
1
SD.