保持滚动位置的大HTML页面时客户端返回(Maintain Scroll Position of l

2019-09-02 00:45发布

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

当客户的回报,太麻烦,试图寻找到由于长期html页面离开的确切位置。

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

Answer 1:

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

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

    window.pageYOffset

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

    • 你可以选择来存储数据,当窗口关闭,或每次用户滚动,或一组间隔...

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

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

    window.scrollTo(0, position);

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



Answer 2:

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

更新

你应该明白,以使其发挥作用的概念。 你可以阅读有关cookies和如何与他们在JavaScript交互这里 。 该链接包含一个活生生的例子。

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

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

我给你所有的拼图,这是由你来把它们放在一起。



Answer 3:

我做了小的jQuery插件,您可以包括和这个functionallity没有cookies等只是body标签结束之前包括。

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

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



文章来源: Maintain Scroll Position of large HTML page when client returns