使用后退按钮和Ajax Dom操作维护滚动位置

时间:2014-01-31 15:52:52

标签: javascript jquery html ajax

我正在使用带有无限滚动的ajax加载结果,但是,当您单击列表中的项目并离开页面时,然后单击后退按钮,您将返回列表顶部。

我无法弄清楚如何让用户返回到他们离开的位置。

查看我正在处理的网站: https://www.studenthouses.com/search/manchester/

向下滚动几次,然后点击一个属性,然后点击返回,你会看到我的意思。

我不记得结果位置并加载它们因为它需要太长时间,所以我真的需要浏览器在它返回到页面时记住DOM,或者将它缓存一些。

有解决方法吗?

非常感谢

1 个答案:

答案 0 :(得分:1)

当然有它,这是一块蛋糕。嗯,这是一个cookie,实际上:))

你不需要太多解决这个问题。

首先,在这里获取一些cookie:Cookie API

其次,你必须以某种方式对cookie中的数据进行编码。如果您有多个这样的页面,则必须以某种方式将它们分开或使用键值对并存储如下内容:

manchester=3522

每当你进入页面,加载cookie,等待页面完全展开(你使用AJAX或类似的,你将不得不等待展开的页面window.onload不会这样做。

如果没有cookie,请跳过此步骤:

  • 将页面向下滚动到您从Cookie中加载的偏移量:scrollTo

接下来,每当滚动页面时,修改cookie。要避免颠簸,您需要以轮询方式执行此操作。使用setInterval()可能在500毫秒,并检查用户是否更改了滚动位置。如果他这样做,请使用新值保存cookie。

相关问题