Question

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

非常感谢！

Answer 1

在页面卸载期间，获取滚动位置并将其存储在本地存储中。然后在页面加载期间，检查本地存储并设置该滚动位置。假设您有一个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"));
   }
});

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()时，这实际上是默认的浏览器功能as user SD. has pointed out。

在我当前正在建设的网站上，我希望公司的徽标反向链接到索引页面。从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

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

7 个答案: