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

Question

我服务很长的html页面(短电子书)

当客户回来时,由于长html页面而试图找到离开的确切位置太麻烦了.

是否有一种简单的方法可以自动维护滚动位置,以便下次客户端返回页面时,页面会自动向下滚动到停止的位置.这需要透明,即不要点击"存储"滚动位置.

Answer 1

步骤很简单,但这个问题的解决方案取决于您的应用实施,您可以:

• 检索当前滚动位置,您可以使用:

  window.pageYOffset

• 存放位置,这有两个部分,时间和地点:

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

  • 对于"where",根据您的应用程序,您可能希望将其存储在服务器端的cookie,本地存储中(如果用户需要登录以阅读电子书)...

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

  window.scrollTo(0, position);

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

Answer 2

我制作了一个小的jquery插件,你可以包含并具有这个功能,没有cookie等.包括在body标签结束之前.

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

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

Answer 3

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

更新

您应该了解这些概念以使其发挥作用.你可以在这里阅读有关cookie以及如何与它们进行交互的内容.该链接包含一个实例.

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

您可以检查这个堆栈溢出问题的答案如何跳转到指定的偏移和这一个,看看如何以检索它.

我给了你所有的拼图,你可以把它们放在一起.