javascript - 通过无限滚动回到相同的位置

Question

我想实现一个功能，点击后退按钮，我会回到相同的位置。一个很好的例子可能是 http://www.jabong.com/men/clothing/mens-t-shirts/ .在这里，如果您向下滚动并点击产品，然后从产品页面点击返回，您将到达该产品所在页面的相同位置。

此处显示的示例未在 url 中附加任何内容以记住位置。此外，它不使用 pushstate 或 history.js(不通过 ajax 加载)。

对我如何做到这一点有什么见解吗？

编辑:我使用无限滚动分页(如 pinterest)，并且页面在向下滚动时不断加载。当我返回时，查询再次运行并重新加载页面。如果我之前在第 4 页，返回后，页面不会加载到第 4 页，所以有一个中断，因此我无法到达那个位置。

所以我的问题是如何使用无限滚动来做到这一点？

Answer 1

您可以使用history.replaceState 来存储页面离开前的滚动位置。当用户返回时，您可以检查 history.state 中是否存在某个滚动位置，如果存在，则滚动到该位置。

另一件需要考虑的事情是，浏览器也可以在离开时保留页面(如果缓存策略允许)并在返回时恢复它，包括滚动位置。在这种情况下，返回时不会触发浏览器事件，除了 pageshow 事件(检查浏览器支持)，它会通过 event.persisted 告诉您页面是否由缓存与否。您可能想再次通过 history.replaceState 收听该事件以从存储状态中清除滚动位置。

最后，你要考虑浏览器自己做滚动恢复，你可能需要通过 history.scrollRestoration 禁用它(但检查浏览器支持)