Javascript 使用 ui-router 和 Angularjs 自动滚动到 TOP
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26444418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Autoscroll to TOP with ui-router and Angularjs
提问by Mr. BigglesWorth
I've read so many different problems with this and none of the solution given seem to fit my use case. I started by simply putting target="_top" on all my links, but that actually forces my app to reload which wont work. I've also seen people say they use autoscroll="true"but that only seems to work if its within my ui-view.
我已经阅读了很多不同的问题，但给出的解决方案似乎都不适合我的用例。我开始简单地将 target="_top" 放在我所有的链接上，但这实际上迫使我的应用程序重新加载，这将不起作用。我也看到有人说他们使用autoscroll="true"但这似乎只有在我的ui-view 中才有效。
The issue with this is that in my index.html file I have fixed nav and other static elements that are above my first ui-view. This means when I go to other pages I lose the navigation as the page loads past those elements. I've also tried putting this on the body with:
问题在于，在我的 index.html 文件中，我已经修复了位于第一个 ui-view 上方的导航和其他静态元素。这意味着当我转到其他页面时，当页面加载通过这些元素时，我会丢失导航。我也试过把它放在身体上：
<body autoscroll="true">
</body>
This doesn't seem to do anything either. So the question is, how can I make sure that new pages (new route changes from ui-router) result in starting at the top of the page? THANKS!
这似乎也没有任何作用。所以问题是，如何确保新页面（来自 ui-router 的新路由更改）导致从页面顶部开始？谢谢！
回答by TaylorMac
If you want it to always scroll to 0 cross-browser, do nothing with autoscroll. Just place this your run block:
如果您希望它始终跨浏览器滚动到 0，请不要使用自动滚动。只需将其放置在您的运行块中：
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
回答by mdickin
Using version 1.0.6, the $stateChangeSuccessevent is deprecated in favor of the $transitionsservice. Here is the code I used to scroll to the top on every state change:
使用 1.0.6 版时，$stateChangeSuccess不推荐使用该事件以支持该$transitions服务。这是我用来在每次状态更改时滚动到顶部的代码：
app.run(['$transitions', function ($transitions) {
$transitions.onSuccess({}, function () {
document.body.scrollTop = document.documentElement.scrollTop = 0;
})
}]);
回答by cheekybastard
I had exactly the same problem, fixed navbar on route changes, page loading partially scrolled down the page.
我遇到了完全相同的问题，在路线更改时修复了导航栏，页面加载部分向下滚动页面。
I just added autoscroll="false"to ui-view, like so:
我刚刚添加autoscroll="false"到ui-view，像这样：
<div ui-view="main" autoscroll="false"></div>
edit
编辑
Just tested this method, bit of a dirty hack, but it works. Import angular services $anchorScroll& $locationinto the relevant controllers for ui-router .stateconfig. Then use a $watchon ui-router $stateParamsto call $location.hash('top');on route/state changes.
刚刚测试了这个方法，有点脏，但它有效。将 angular services $anchorScroll&$location导入相关控制器以进行 ui-router.state配置。然后使用$watchui-router$stateParams调用$location.hash('top');路由/状态更改。
https://docs.angularjs.org/api/ng/service/$anchorScroll
https://docs.angularjs.org/api/ng/service/$anchorScroll
https://docs.angularjs.org/api/ng/service/$location#hash
https://docs.angularjs.org/api/ng/service/$location#hash
.controller('myCtrl', function ($location, $anchorScroll, $scope, $stateParams) {
$scope.$watchCollection('$stateParams', function() {
$location.hash('top');
$anchorScroll();
});
});
回答by Dilhan Jayathilake
There is an Angular service for this. https://docs.angularjs.org/api/ng/service/$anchorScroll
为此有一个 Angular 服务。 https://docs.angularjs.org/api/ng/service/$anchorScroll
Sample Code:
示例代码：
.run(function ($rootScope, $state, $stateParams, $anchorScroll) {
$rootScope.$on('$stateChangeStart', function () {
$anchorScroll();
});
});
If you want to scroll to a specific element
如果要滚动到特定元素
.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();
});
});
回答by Bessie Malek
I am using ui-router. My run looked like this:
我正在使用 ui-router。我的跑步看起来像这样：
.run(function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
})
回答by sigmapi13
Did the same thing as the excepted answer from @TaylorMac but in $locationChangeStart.
做了与@TaylorMac 的例外答案相同的事情，但在 $locationChangeStart 中。
index.run.js:
index.run.js:
$rootScope.$on('$locationChangeStart', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});回答by rgpass
I had to do a combination of the other two answers.
我必须结合其他两个答案。
<div ui-view autoscroll="false"></div>
In combination with
结合
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
Note:This is on v0.2.15 of ui-router
注意：这是在 ui-router v0.2.15 上
