24

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

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

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

4

3 回答 3

26

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

  • 检索当前滚动位置，可以使用：

    window.pageYOffset

  • 存储位置，这有两个部分，何时和何地：

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

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

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

    window.scrollTo(0, position);

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

于 2013-05-05T20:57:39.593 回答
11

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

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

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

于 2013-10-04T09:00:48.920 回答
8

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

更新

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

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

您可以检查这个堆栈溢出问题以获取如何跳转到特定偏移量的答案，以及查看如何检索它的答案。

我给了你所有的拼图，你可以把它们拼在一起。

于 2013-05-05T20:35:16.983 回答