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 页，他正在查看该页面上的帖子。

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

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

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

Answer 1

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

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

您还可以查看 this tumbledry.org 上的博客文章，它解释了一些更接近您正在尝试做的事情，但我认为它也没有实现。