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

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

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

那么，当路线改变时，是否有一种优雅的方式可以滚动到顶部?

当前回答

你可以使用这个javascript

$anchorScroll()

2014-01-10 22:58:49

其他回答

只需要运行这段代码

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

    window.scrollTo(0, 0);

});

2014-10-15 19:52:13

问题是你的ngView在加载一个新视图时保持滚动位置。您可以指示$anchorScroll“在视图更新后滚动视图口”(文档有点模糊，但这里的滚动意味着滚动到新视图的顶部)。

解决方案是在你的ngView元素中添加autoscroll="true":

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

2014-07-03 08:53:16

供任何遇到标题中描述的问题的人参考(就像我一样)，谁也在使用 AngularUI路由器插件…

在这个SO问题中，当你改变路由时，angular-ui路由器会跳到页面的底部。不明白为什么页面在底部加载?Angular UI-Router自动滚动问题

然而，正如答案所述，你可以通过在ui视图中输入autoscroll="false"来关闭这种行为。

例如:

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div>

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

2014-02-14 19:54:48

以下是我的(看似)健壮、完整且(相当)简洁的解决方案。它使用了最小化兼容样式(以及对模块的angular.module(NAME)访问)。

angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
    $rootScope.$on("$locationChangeSuccess", function() {
                $anchorScroll();
    });
}]);

PS我发现自动滚动的东西没有影响，无论是设置为真或假。

2014-12-13 22:51:31

试试这个http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

它会滚动到列表的顶部

2014-07-17 08:59:56

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

推荐文章

最新文章

标签