实现无限滚动的后退按钮

Implementing backbutton with infinite scroll

本文关键字：按钮 无限 滚动 实现      更新时间：2023-09-26

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

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

我的url是这样的:

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现在被加载在最顶端，他所在的部分重新加载第三页，他却在看那一页的一篇文章。

是否有办法让用户每次点击后退按钮都回到页面顶部?

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

我所见过的backbutton with infinite scroll的最好例子是http://imgur.com，但是我不知道他们是怎么做到的

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

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

你也可以看看tumbledry.org上的这篇博客文章，它解释了一些更接近你想要做的事情，但我认为它没有很好地实现。

相关文章：