我读过这么多不同的问题,没有一个解决方案适合我的用例。我开始只是简单地在我的所有链接上添加target="_top“,但这实际上迫使我的应用程序重新加载,这将不起作用。我也看到人们说他们使用autoscroll="true",但这似乎只有在我的视图ui-中才能起作用。
这样做的问题是,在我的index.html文件中,我修复了nav和其他静态元素,它们位于我的第一个ui-view之上。这意味着当我转到其他页面时,当页面加载超过这些元素时,我会失去导航。我也试着把这个放在身体上:
<body autoscroll="true">
</body>
这似乎也没有什么用。所以问题是,我如何确保新的页面(新的路由从ui-router更改)导致从页面的顶部开始?谢谢!
发布于 2014-12-12 02:50:11
如果您希望它始终跨浏览器滚动到0,请不要使用自动滚动。只需将此代码块放在run块中:
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
发布于 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;
})
}]);
发布于 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
复制相似问题