使用 ui-router 和 Angularjs 自动滚动到顶部
Posted
技术标签:
【中文标题】使用 ui-router 和 Angularjs 自动滚动到顶部【英文标题】:Autoscroll to TOP with ui-router and Angularjs 【发布时间】:2014-12-14 04:22:20 【问题描述】:我已经阅读了很多不同的问题,但给出的解决方案似乎都不适合我的用例。我一开始只是简单地将 target="_top" 放在我的所有链接上,但这实际上会迫使我的应用程序重新加载,这将无法正常工作。我还看到有人说他们使用 autoscroll="true",但这似乎只有在我的 ui-view 中才有效。
问题在于,在我的 index.html 文件中,我修复了位于我的第一个 ui 视图之上的导航和其他静态元素。这意味着当我转到其他页面时,当页面加载通过这些元素时,我会失去导航。我也试过把它放在身上:
<body autoscroll="true">
</body>
这似乎也没有任何作用。所以问题是,如何确保新页面(来自 ui-router 的新路由更改)导致从页面顶部开始?谢谢!
【问题讨论】:
【参考方案1】:Using version 1.0.6,$stateChangeSuccess
事件已弃用,取而代之的是 $transitions
服务。这是我用来在每次状态更改时滚动到顶部的代码:
app.run(['$transitions', function ($transitions)
$transitions.onSuccess(, function ()
document.body.scrollTop = document.documentElement.scrollTop = 0;
)
]);
【讨论】:
这是最新的答案,接受的答案是指旧的 uirouter 版本。 5 个 SO 主题和 20 个答案稍后,这是唯一有效的。你应该起来【参考方案2】:与@TaylorMac 的例外答案相同,但在 $locationChangeStart 中。
index.run.js:
$rootScope.$on('$locationChangeStart', function()
document.body.scrollTop = document.documentElement.scrollTop = 0;
);
【讨论】:
【参考方案3】:为此有一个 Angular 服务。 https://docs.angularjs.org/api/ng/service/$anchorScroll
示例代码:
.run(function ($rootScope, $state, $stateParams, $anchorScroll)
$rootScope.$on('$stateChangeStart', function ()
$anchorScroll();
);
);
如果你想滚动到特定元素
.run(function ($rootScope, $state, $stateParams, $anchorScroll)
$rootScope.$on('$stateChangeStart', function ()
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
);
);
【讨论】:
【参考方案4】:我正在使用 ui-router。我的跑步看起来像这样:
.run(function($rootScope, $state, $stateParams)
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function()
document.body.scrollTop = document.documentElement.scrollTop = 0;
);
)
【讨论】:
【参考方案5】:我必须结合其他两个答案。
<div ui-view autoscroll="false"></div>
结合
$rootScope.$on('$stateChangeSuccess', function()
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
);
注意:这是在 ui-router v0.2.15 上
【讨论】:
【参考方案6】:如果您希望它始终滚动到 0 跨浏览器,请不要对自动滚动执行任何操作。只需将此作为您的运行块:
$rootScope.$on('$stateChangeSuccess', function()
document.body.scrollTop = document.documentElement.scrollTop = 0;
);
【讨论】:
参加晚会但很喜欢! 你让我开心! 效果很好。我建议的唯一改进是像这样使用$document
服务:$document[0].body.scrollTop = $document[0].documentElement.scrollTop = 0;
从 iFrame 中: $rootScope.$on('$stateChangeSuccess', function() window.parent.$("body").animate(scrollTop:100, 'slow' ); );
像魅力一样工作。不需要autoscroll = true
。只是不要忘记像这样在你的run
块中注入$document
。 .run(function($rootScope, $state, $document, $stateParams) $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; $rootScope.$on('$stateChangeSuccess', function() $document[0].body.scrollTop = $document[0].documentElement.scrollTop = 0; ); )
【参考方案7】:
我遇到了完全相同的问题,修复了路线更改的导航栏,页面加载部分向下滚动页面。
我刚刚将autoscroll="false"
添加到ui-view
,如下所示:
<div ui-view="main" autoscroll="false"></div>
编辑
刚刚测试了这个方法,有点脏,但它有效。将角度服务 $anchorScroll
和 $location
导入 ui-router .state
配置的相关控制器。然后在 ui-router 上使用 $watch
$stateParams
在路由/状态更改时调用 $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();
);
);
【讨论】:
也试过了,但是当我链接到新路线时,它只会显示从上一页停止滚动的位置。没有运气:( 控制器在路由更改时收集垃圾,您链接的状态/页面是否在 ui-router.state
对象中有控制器?
他们中的一些人是的。奇怪的是,所有页面都会发生这种情况。
刚刚使用 $location.hash(); 用另一种方法更新了;
当你像这样一起使用它们时,你不需要同时导入它们。只需使用 $anchorScroll('top');以上是关于使用 ui-router 和 Angularjs 自动滚动到顶部的主要内容,如果未能解决你的问题,请参考以下文章
AngularJS ui-router (嵌套路由)的简单学习
如何使用 AngularJS 的 ui-router 提取查询参数?