Question

假设我使用无限滚动或“加载更多结果”按钮实现搜索结果，该按钮将更多结果发送到初始结果页面。因此，用户无需离开相同的搜索结果页即可浏览结果。

我的用户滚动了一段时间，然后查找特定结果并点击它。这不是他们需要的，所以他们点击回来。

如何将结果页面恢复到离开时的状态，让页面向下滚动到正确的位置？初始搜索可能产生了10个结果，如果我们加载了20个结果，那就是页面上的30个结果，并说他们在离开页面时滚动到结果23。

接受这种方法的方法是什么？

（请注意，这不是特定于搜索结果。一般情况下，如果我在浏览器中加载页面后弄乱页面，当用户返回时，如何保留/重建此页面的状态？）

Answer 1

这个问题有多种方法。

假设您正在处理搜索结果。每当您将更多结果加载到视图中时，下一个搜索结果的起始索引就会上升。

第三次加载10个元素后，你的起始索引将是40。

现在，您可以将此索引动态地作为哈希值放入URL中，例如将其扩展为http://mysite.com/search?q=searchterm#startindex=40。现在，如果用户点击搜索结果然后再点击，您将能够从URL中提取该值并将相应数量的其他结果加载到视图中。
可选择将用户滚动到或多或少的最后位置。

这个原则类似于使用cookies，localStorage，会话参数或者你有什么代替URL哈希。
您可以在客户端保存完整的搜索结果，例如localStorage和（在“后退”按钮之后）从那里读取并将其注入页面。这样，您就不必再从服务器请求它，反应性可能会更好。

此时，您还可以保存并恢复用户的滚动位置，以便将他带回到他在页面上的位置。

我正在处理类似的问题，并且我会考虑使用第二种方法。

Answer 2

一种方法是以编程方式模拟浏览器。使用 javascript历史记录对象。您可以点击按钮并调用go（）函数，如下所示

history.go(-1)

这只会将您带到上一页。

See here了解更多细节。