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

Question

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

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

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

向下滚动几次,然后单击一个属性,然后单击返回,您将看到我的意思.

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

这个问题有方法解决吗？

非常感谢

Answer 1

当然有，而且这是小菜一碟。嗯，实际上它是一块饼干:)

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

首先，在这里获取一些cookie：Cookie API

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

manchester=3522

每当你进入页面时，加载cookie，等待页面完全展开（你使用AJAX或类似的，你必须等待页面展开，不window.onload会这样做）。

如果没有cookie，则跳过此步骤：

• 将页面向下滚动到您从 cookie 加载的偏移量：scrollTo

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