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

Question

我在一个大的可滚动div中有很长的链接列表.每当用户单击链接然后单击后退按钮时,它将从div的最顶部开始.它对我们的用户不友好.按下后退按钮时,有什么方法让浏览器滚动到上一个位置？

非常感谢你!

Answer 1

在页面卸载期间,获取滚动位置并将其存储在本地存储中.然后在页面加载期间,检查本地存储并设置该滚动位置.假设你有一个带id的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>