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

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

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


当前回答

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

其他回答

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

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

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

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

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

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

这段代码对我来说很有用。我希望它也会为你工作。 你所要做的就是注入$anchorScroll到你的运行块,并将监听器函数应用到rootScope,就像我在下面的例子中所做的那样。

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

下面是Angularjs模块的调用顺序:

app.config () app.run () 指令的编译函数(如果它们在dom中找到) app.controller () 指令的链接函数(如果找到的话)

RUN BLOCK在注入器创建后执行,用于启动应用程序。这意味着当你重定向到新的路由视图时,运行块中的侦听器调用

$ anchorScroll ()

你现在可以看到滚动开始顶部与新的路由视图:)

简单解决方案:在主路模块中添加scrollPositionRestoration功能。 是这样的:

const routes: Routes = [

 {
   path: 'registration',
   loadChildren: () => RegistrationModule
},
];

 @NgModule({
  imports: [
   RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
  ],
 exports: [
 RouterModule
 ]
 })
  export class AppRoutingModule { }

你可以使用这个javascript

$anchorScroll()