AngularJs瀏覽器後退按鈕：返回到上一個地點頁

Question

我正在使用Angular作爲單個頁面應用程序。有時我有一個更長的項目列表。當用戶向下滾動頁面並點擊該項目時，他們將轉到該項目的詳細視圖。如果他們點擊瀏覽器上的後退按鈕，角色會將他們帶回列表中，但它會回到列表頂部。

通常在一個簡單的html頁面上，如果你向下滾動一個頁面，然後點擊一個鏈接並轉到另一個頁面，如果你點擊瀏覽器上的後退按鈕，它會立即返回到你所在的滾動位置在該頁面上。如果您正在瀏覽項目列表，這非常有用。

有沒有辦法讓Angular模仿這種行爲，以便使用後退按鈕將用戶帶回列表和相同的滾動位置？

Answer 1

這聽起來像你想要使用HTML歷史API，如window.history.pushState()和window.history.popState()。這聽起來像你想使用瀏覽器滾動。

快速谷歌搜索發現我this documentation about $location 和this documentation about scrolling從AngularJS文檔。

我不知道如何在AngularJS做到這一點，但在jQuery的你可以用pushState()到一個特定的URL添加到瀏覽器的歷史記錄（這可能是你的同一個頁面上的＃），然後你可以添加一個popState()處理程序，當用戶單擊後退按鈕時，將執行刷新頁面以外的操作。

例如

$(document).on('load',function(){ 
window.history.replaceState({element: {positionY: 0}},"load",location.pathname); 
}); 

$(mylink).click(function(evt){ 
// something like: window.history.pushState(evt.target); 
}); 

// this occurs when the user clicks the back button 
$(document).on("popstate", function(evt) { 
evt.preventDefault(); // prevents page refresh 
var state = evt.originalEvent.state; 
window.scrollTo(0,state.element.positionY); 
}