维护大HTML页面的滚动位置时，客户端返回

Question

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

当客户的回报，太麻烦，试图找到准确的地方不放过由于长期html页面。

有一个简单的方法来自动保持滚动位置下一次，所以客户端会自动返回到该页面的页面滚动到他离开的地方。 这需要是透明的，即不需要点击以“存储”滚动位置。

Answer 1

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

更新

你应该明白，以使其发挥作用的概念。您可以阅读关于cookie以及如何在javascript here中与它们交互的信息。该链接包含一个现场示例。

的onunload的和onbeforeunload是您可以使用您的网页时被关闭，以检测JavaScript事件。你应该谷歌他们是什么以及如何使用它们。

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

我给你所有的拼图，这取决于你把它们放在一起。

Answer 2

步骤很简单，但解决这一问题取决于你的应用程序实现，您可以：

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

  window.pageYOffset

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

  • 你可以选择来存储数据，当窗口关闭，或每次用户滚动，或在设定的时间间隔......

  • 的“里”，这取决于你的应用程序，你可能想其存储在一个cookie，本地存储，服务器端（如果用户需要登录到阅读电子书）...

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

  window.scrollTo(0, position);

所以这里真正的问题是，什么时候和在哪里存储的位置，而取决于你的应用。

Answer 3

我制作了一个小的jquery插件，你可以包含这个功能而不用cookies等。在之前包括身体标签的结尾。

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

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