更改路线不会在新页面中滚动到顶部

javascript angularjs scroll angularjs-routing

2022-08-30 00:18:48

我发现了一些不受欢迎的行为，至少对我来说，当路线改变时。在教程 http://angular.github.io/angular-phonecat/step-11/app/#/phones 的步骤 11 中，您可以看到电话列表。如果你滚动到底部并点击其中一个最新的，你可以看到滚动不是在顶部，而是在中间。

我也在我的一个应用程序中找到了这个，我想知道如何让它滚动到顶部。我可以手动完成，但我认为应该有其他优雅的方法来做到这一点，我不知道。

那么，当路线发生变化时，有没有一种优雅的方式可以滚动到顶部？

答案 1

问题在于，您的 ngView 在加载新视图时会保留滚动位置。您可以指示“在视图更新后滚动视区”（文档有点模糊，但在此处滚动意味着滚动到新视图的顶部）。$anchorScroll

解决方案是添加到您的 ngView 元素：autoscroll="true"

<div class="ng-view" autoscroll="true"></div>

答案 2

只需将此代码运行即可

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {

    window.scrollTo(0, 0);

});