javascript - 实现无限滚动的后退按钮

Question

我在我的网站上通过无限滚动加载了新页面。每次加载新页面时，我都会使用 HTML5 pushstate API 更新 url：

if(history.pushState) {
    history.pushState(null, null, '/page:' + current_page);
}

我的网址如下所示：

http://mysite.com.com/page:1
http://mysite.com.com/page:2
http://mysite.com.com/page:3

等等...

当用户单击列表中的一个项目（例如在第 2 页上）然后单击返回按钮时，他将返回到：

http://mysite.com.com/page:2

但是，他不是在页面顶部，而是在他单击的部分。由于 page:2 现在加载在最顶部，因此他所在的部分重新加载了第 3 页，而他正在查看该页面中的帖子。

有没有办法让用户在每次点击后退按钮时回到页面顶部？

我尝试在页面加载时使用锚标签和 javascript 滚动，但两者都不可行，因为在用户被带到顶部之前有几次跳转。

我见过的使用无限滚动的后退按钮的最佳示例是http://imgur.com，但我不知道他们是如何做到的。

score 3 · Accepted Answer

github上有一个名为infinite-ajax-scroll的库，它似乎可以满足您的需求。您可以使用该history选项对其进行初始化，该选项将在您滚动页面时更新 url 的哈希值。唯一的问题是您必须更改加载数据的方式才能使用库。

jQuery.ias({
    ....
    history:true,
    ....
});

1 回答 1