Question

我正在将Angular用于单页面应用程序。有时我会有更长的项目列表。当用户向下滚动页面并单击该项目时，他们会转到该项目的详细视图。如果他们点击浏览器上的后退按钮，则会将它们带回列表，但它会返回到列表顶部。

通常在简单的HTML页面上，如果向下滚动页面，然后单击链接并转到另一个页面，如果您点击浏览器上的后退按钮，则会直接返回到您所在的滚动位置那个页面。如果您浏览项目列表，这将非常有用。

有没有办法让Angular模仿这种行为，以便使用后退按钮将用户带回到列表和相同的滚动位置？

Answer 1

听起来您想要使用HTML历史记录API，例如window.history.pushState()和window.history.popState()。听起来您还想使用浏览器滚动。

快速谷歌搜索找到了我this documentation about $location 和AngularJS文档中的this documentation about scrolling。

我不知道如何在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);
}

AngularJs浏览器后退按钮：返回页面上的上一个点

1 个答案: