實現帶有無限滾動的回滾鍵

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博客文章，解釋更接近於你正在嘗試做的，但我不認爲它的實施爲好。