按下后退按鈕時如何保留可滾動區域的滾動位置？

Question

我在一個大的可滾動 div 中有很長的鏈接列表。 每次當用戶單擊鏈接然后單擊后退按鈕時，它都會從 div 的最頂部開始。 它對我們的用戶來說不是用戶友好的。 有什么方法可以讓瀏覽器在按下后退按鈕時滾動到上一個位置？

非常感謝！

Answer 1

在頁面卸載期間，獲取滾動位置並將其存儲在本地存儲中。 然后在頁面加載期間，檢查本地存儲並設置滾動位置。 假設您有一個帶有 id element的 div element 。 如果是頁面，請更改選擇器:)

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

Answer 2

我認為我們應該保存每頁滾動數據，我們也應該使用會話存儲而不是本地存儲，因為會話存儲僅影響當前選項卡，而本地存儲在所有選項卡和同一來源的窗口之間共享

$(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));
            }
        });

Answer 3

我在一個由固定菜單 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 滾動事件上，div 的滾動位置存儲在瀏覽器歷史對象內的狀態對象中。 按下后退按鈕后，在文檔就緒事件中，div 的滾動位置恢復為從 history.state 對象檢索到的值。

此解決方案應該適用於任意長鏈接鏈的反向導航。

這里的文檔： https : //developer.mozilla.org/en-US/docs/Web/API/History_API

Answer 4

使用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>

Answer 5

對於來自 react 或類似 react 路由器的任何人，這里有兩個簡單的功能：

export function saveScrollPosition(context: any) {
  let path = context.router.route.location.pathname;
  let y = window.scrollY;
  sessionStorage.setItem("scrollPosition_" + path, y.toString());
}

export function restoreScrollPosition(context: any) {
  let path = context.router.route.location.pathname;
  let y = Number(sessionStorage.getItem("scrollPosition_" + path));
  window.scrollTo(0, y);
}

Answer 6

如果后退按鈕是一種歷史后退按鈕window.history.back()那么您正在尋找的是默認瀏覽器功能。 所以你不必擔心。

如果您的后退按鈕實際上通過鏈接或表單指向應用程序中的某個 URL，那么您必須手動處理。

對於解決方案，您可以使用 cookie 來存儲您的頁面滾動值。 每次用戶在您的頁面上滾動時，請將該頁面的滾動值保存到 cookie。 額外的工作應用於手動 cookie 管理。

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

此 cookie 值可用於設置頁面訪問時頁面的滾動值。

window.scroll(0,cookievalue);

Answer 7

使用History api，您可以利用scrollRestoration並阻止瀏覽器重置滾動位置。

在這里閱讀。 https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

Answer 8

我使用下面的代碼來恢復單個項目的滾動位置：

（將此代碼添加到 (function ($){ ... })(jQuery); 中）

 if (sessionStorage)
    $.fn.scrollKeeper=function(options)
    {
        var defauts =
            {
                key : 'default'
            };
        var params = $.extend(defauts, options);

        var key = params.key;
        var $this = $(this);

        if( params.init === true)
        {
            var savedScroll = sessionStorage.getItem(key);

            if(typeof savedScroll != 'undefined'){
                var int_savedScroll = parseInt(savedScroll);
                if(int_savedScroll > 0)
                {
                    $this.scrollTop( int_savedScroll );
                }
            }
        }

        window.addEventListener("beforeunload", function() 
        {
            sessionStorage.setItem(key, $this.scrollTop());
        });
    };

用法：

      $('#tab1div').scrollKeeper({key: 'uniq-key1', init: true});

如果您不需要恢復滾動位置（例如重新啟動），而您只需要保存滾動位置以備下次使用，請使用：

      $('#tab1div').scrollKeeper({key: 'uniq-key1', init: false});