客户端返回时保持大 HTML 页面的滚动位置

Posted 2023-03-10

【中文标题】客户端返回时保持大 HTML 页面的滚动位置

【英文标题】：Maintain Scroll Position of large HTML page when client returns

【发布时间】：2013-04-29 14:52:25

【问题描述】：

我正在提供很长的 html 页面（短电子书）

当客户返回时，由于 html 页面过长，很难找到确切的中断位置。

是否有一种简单的方法可以自动保持滚动位置，以便下次客户端返回页面时，页面会自动向下滚动到他离开的位置。 这需要是透明的，即没有点击“存储”滚动位置。

【问题讨论】：

为什么不添加一个隐藏字段来存储滚动位置并在提交之前设置它......然后从隐藏字段onload加载它？

没有提交。它只是用于阅读的直接 html

【参考方案1】：

您总是可以使用 onbeforeunload 事件来检查窗口何时关闭，并使用当前位置设置 cookie。每次加载页面时，只需检查是否设置了该 cookie。如果是 - 使用该值将用户重定向到保存的位置。

更新

您应该了解这些概念才能使其发挥作用。您可以在 javascript here 中阅读有关 cookie 以及如何与它们交互的信息。该链接包含一个实时示例。

onunload 和 onbeforeunload 是 javascript 事件，您可以使用它们来检测页面何时关闭。你应该用谷歌搜索它们是什么以及如何使用它们。

您可以查看this stack-overflow question 以获取如何跳转到特定偏移量的答案，并查看this one 以查看如何检索它。

我把所有的拼图都给了你，由你来拼凑。

【讨论】：

你也可以使用localStorage。

查理绝对就在这里。事实上，这种方法在给定的情况下似乎更胜一筹。这是比较这两种方法的链接：***.com/questions/3220660/local-storage-vs-cookies。只是为了确保您不会感到困惑：本地存储是解决方案中“cookie”部分的另一种替代方案。

【参考方案2】：

步骤很简单，但这个问题的解决方案取决于你的应用实现，你可以：

获取当前滚动位置，可以使用：

window.pageYOffset

存储位置，这有两个部分，时间和地点：

您可以选择在窗口关闭时、每次用户滚动时或在设定的时间间隔内存储数据...

对于“位置”，根据您的应用，您可能希望将其存储在服务器端的 cookie、本地存储中（如果用户需要登录才能阅读电子书）...

通过检索存储的数据来恢复用户返回时的位置，并使用滚动到该位置

window.scrollTo(0, position);

所以这里真正的问题是，何时何地存储位置，这取决于您的应用程序。

【参考方案3】：

我制作了一个小型 jquery 插件，您可以在没有 cookie 等的情况下包含并拥有此功能。包含在 body 标记结束之前。

  <script type="text/javascript" src="/js/maintainscroll.jquery.min.js"></script>
</body>

https://github.com/evaldsurtans/maintainscroll.jquery.js