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

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

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


当前回答

我找到了这个解。如果你转到一个新视图,函数就会被执行。

var app = angular.module('hoofdModule', ['ngRoute']);

    app.controller('indexController', function ($scope, $window) {
        $scope.$on('$viewContentLoaded', function () {
            $window.scrollTo(0, 0);
        });
    });

其他回答

有点晚了,但我已经尝试了所有可能的方法,没有一个能正常工作。以下是我的优雅解决方案:

我使用一个控制器来管理我所有的页面与ui-router。它允许我将未经过身份验证或验证的用户重定向到适当的位置。大多数人把他们的中间件放在他们的应用程序的配置中,但我需要一些http请求,因此全局控制器更适合我。

我的index.html看起来像这样:

<main ng-controller="InitCtrl">
    <nav id="top-nav"></nav>
    <div ui-view></div>
</main>

我的initCtrl.js是这样的:

angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
    $rootScope.$on('$locationChangeStart', function(event, next, current){
        // middleware
    });
    $rootScope.$on("$locationChangeSuccess", function(){
        $timeout(function() {
            $anchorScroll('top-nav');
       });
    });
});

所有可能的方法我都试过了,这个方法效果最好。

没有一个答案能解决我的问题。我在视图之间使用动画,滚动总是在动画之后发生。我发现的解决方案是,在动画之前滚动到顶部是以下指令:

yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $animate.on('enter', element, function (element, phase) {

                if (phase === 'start') {

                    window.scrollTo(0, 0);
                }

            })
        }
    };
}]);

我把它插入我的视图,如下所示:

<div scroll-to-top-before-animation>
    <div ng-view class="view-animation"></div>
</div>

这为我工作,包括自动滚动

<div class=“ngView”autoscroll=“true”>

只需要运行这段代码

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

    window.scrollTo(0, 0);

});

你可以使用这个javascript

$anchorScroll()