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

时间:2013-05-05 20:24:05

标签: javascript scroll

我正在提供很长的html页面(简短的电子书)

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

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

3 个答案:

答案 0 :(得分:18)

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

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

    window.pageYOffset

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

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

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

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

    滚动到该位置

    window.scrollTo(0, position);

因此,真正的问题是,何时何地存储该职位,这取决于您的申请。

答案 1 :(得分:8)

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

<强>更新

您应该了解这些概念,以使其发挥作用。您可以在javascript here中阅读有关Cookie以及如何与Cookie进行互动的信息。该链接包含一个实例。

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

您可以查看this stack-overflow question以获取有关如何跳转到特定偏移量的答案,并this one查看如何进行回溯。

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

答案 2 :(得分:8)

我制作了一个小jquery插件,你可以包含并且没有cookie等功能。包括在身体标签结束之前。

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

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