实现带有无限滚动的回滚键

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现在被加载在最上面，所以他正在加载新页面，并且他正在从该页面查看帖子。

有没有一种方法可以让用户每次点击后退按钮就回到页面的顶部？

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

我看到的无限滚动回滚工作的最好的例子是http://imgur.com但我不明白他们是如何做到的。

Answer 1

在github上有一个名为infinite-ajax-scroll的库，它似乎正在做你正在寻找的东西。您可以使用history选项对它进行初始化，该选项将在您滚动页面时更新URL的哈希值。唯一的问题是你必须改变你加载数据的方式来处理库。

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

你也可以检查出tumbledry.org this博客文章，解释更接近于你正在尝试做的，但我不认为它的实施为好。