按下后退按钮时如何保留可滚动区域的滚动位置？

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