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); 
}