实现具有无限滚动的后退按钮

Question

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

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

但他不是在页面的顶部，而是在他点击的部分。因为页面：2现在被加载到最顶部，所以他重新加载的部分 第3页，他正在查看该页面的帖子。

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

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

我看到的使用无限卷轴的后退按钮的最佳示例是http://imgur.com，但我无法弄清楚它们是如何做到的。

Answer 1

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

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

您还可以查看tumbledry.org上的this博客文章，该文章解释了与您尝试的内容更接近的内容，但我认为其实施并不正确。