使用ui-router和Angularjs自动滚动到顶部
我读过这么多不同的问题，没有一个解决方案适合我的用例。我开始只是简单地在我的所有链接上添加target="_top“，但这实际上迫使我的应用程序重新加载，这将不起作用。我也看到人们说他们使用autoscroll="true"，但这似乎只有在我的视图ui-中才能起作用。
这样做的问题是，在我的index.html文件中，我修复了nav和其他静态元素，它们位于我的第一个ui-view之上。这意味着当我转到其他页面时，当页面加载超过这些元素时，我会失去导航。我也试着把这个放在身体上：
<body autoscroll="true">
</body>这似乎也没有什么用。所以问题是，我如何确保新的页面(新的路由从ui-router更改)导致从页面的顶部开始？谢谢!
回答 7
Stack Overflow用户
发布于 2014-12-12 02:50:11
如果您希望它始终跨浏览器滚动到0，请不要使用自动滚动。只需将此代码块放在run块中：
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});Stack Overflow用户
发布于 2017-12-06 12:30:40
Using version 1.0.6，为了支持$transitions服务，$stateChangeSuccess事件已弃用。下面是我用来在每次状态改变时滚动到顶部的代码：
app.run(['$transitions', function ($transitions) {
$transitions.onSuccess({}, function () {
document.body.scrollTop = document.documentElement.scrollTop = 0;
})
}]);Stack Overflow用户
发布于 2014-10-19 07:44:22
我有完全相同的问题，修复了导航栏的路线变化，页面加载部分向下滚动页面。
我刚刚在ui-view中添加了autoscroll="false"，如下所示：
<div ui-view="main" autoscroll="false"></div>编辑
我刚刚测试了这个方法，有点下流，但它是有效的。将angular服务$anchorScroll和$location导入到相关控制器中，以进行ui-router .state配置。然后在ui路由器$stateParams上使用$watch在路由/状态更改时调用$location.hash('top');。
https://docs.angularjs.org/api/ng/service/$anchorScroll
https://docs.angularjs.org/api/ng/service/$location#hash
.controller('myCtrl', function ($location, $anchorScroll, $scope, $stateParams) {
$scope.$watchCollection('$stateParams', function() {
$location.hash('top');
$anchorScroll();
});
});https://stackoverflow.com/questions/26444418
复制相似问题