我发现了一些不受欢迎的行为，至少对我来说，当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部，点击最新的一个，你可以看到滚动不是在顶部，而是在中间。
我在我的一个应用程序中也发现了这个，我想知道如何让它滚动到顶部。我可以手动来做，但我认为应该有其他优雅的方法来做这个，我不知道。
那么，当路线改变时，是否有一种优雅的方式可以滚动到顶部?
当前回答
简单解决方案:在主路模块中添加scrollPositionRestoration功能。 是这样的:
const routes: Routes = [
{
path: 'registration',
loadChildren: () => RegistrationModule
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
其他回答
以上所有答案都打破了预期的浏览器行为。大多数人想要的是，如果这是一个“新”页面，它会滚动到顶部，但如果你通过后退(或前进)按钮到达那里，它会返回到之前的位置。
如果你采用HTML5模式，这将变得很简单(尽管我相信一些聪明的人能够想出如何让它变得更优雅!):
// Called when browser back/forward used
window.onpopstate = function() {
$timeout.cancel(doc_scrolling);
};
// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
doc_scrolling = $timeout( scroll_top, 50 );
// Moves entire browser window to top
scroll_top = function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
它的工作方式是，路由器假设它要滚动到顶部，但会延迟一点，让浏览器有机会完成。如果浏览器随后通知我们更改是由于后退/前进导航，它将取消超时，并且滚动永远不会发生。
我使用原始文档命令来滚动，因为我想移动到窗口的整个顶部。如果你只是想让你的ui视图滚动，那么设置autoscroll="my_var"，你可以使用上面的技术控制my_var。但我认为大多数人会想滚动整个页面，如果你去“新的”页面。
上面使用的是ui-router，不过你也可以使用ng-route，把$routeChangeSuccess换成$stateChangeSuccess。
我找到了这个解。如果你转到一个新视图，函数就会被执行。
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 { }
供任何遇到标题中描述的问题的人参考(就像我一样)，谁也在使用 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
经过一两个小时的尝试，ui-view autoscroll=true， $stateChangeStart， $locationChangeStart， $uiViewScrollProvider.useAnchorScroll()， $提供('$uiViewScroll'，…)，和许多其他的组合，我不能得到滚动到新页面顶部的工作预期。
这最终对我来说是有效的。它捕获pushState和replaceState，只在新页面被导航到时更新滚动位置(后退/前进按钮保留它们的滚动位置):
.run(function($anchorScroll, $window) {
// hack to scroll to top when navigating to new URLS but not back/forward
var wrap = function(method) {
var orig = $window.window.history[method];
$window.window.history[method] = function() {
var retval = orig.apply(this, Array.prototype.slice.call(arguments));
$anchorScroll();
return retval;
};
};
wrap('pushState');
wrap('replaceState');
})
