我发现了一些不受欢迎的行为，至少对我来说，当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部，点击最新的一个，你可以看到滚动不是在顶部，而是在中间。
我在我的一个应用程序中也发现了这个，我想知道如何让它滚动到顶部。我可以手动来做，但我认为应该有其他优雅的方法来做这个，我不知道。
那么，当路线改变时，是否有一种优雅的方式可以滚动到顶部?
当前回答
你可以使用这个javascript
$anchorScroll()
其他回答
你可以使用这个javascript
$anchorScroll()
没有一个答案能解决我的问题。我在视图之间使用动画，滚动总是在动画之后发生。我发现的解决方案是，在动画之前滚动到顶部是以下指令:
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
我找到了这个解。如果你转到一个新视图，函数就会被执行。
var app = angular.module('hoofdModule', ['ngRoute']);
app.controller('indexController', function ($scope, $window) {
$scope.$on('$viewContentLoaded', function () {
$window.scrollTo(0, 0);
});
});
简单解决方案:在主路模块中添加scrollPositionRestoration功能。 是这样的:
const routes: Routes = [
{
path: 'registration',
loadChildren: () => RegistrationModule
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
