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

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

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


当前回答

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

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

其他回答

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

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>

供任何遇到标题中描述的问题的人参考(就像我一样),谁也在使用 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

你可以使用这个javascript

$anchorScroll()

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

它会滚动到列表的顶部

使用angularjs的UI路由器,我所做的是:

    .state('myState', {
        url: '/myState',
        templateUrl: 'app/views/myState.html',
        onEnter: scrollContent
    })

:

var scrollContent = function() {
    // Your favorite scroll method here
};

它在任何页面上都不会失败,而且它不是全局的。