javascript 无法弄清楚为什么页面在底部加载？Angular UI-Router 自动滚动问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21711939/
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
Can't figure out why page loads at bottom? Angular UI-Router autoscroll Issue
提问by ac360
For the life of me, I cannot figure out why this home page loads at the bottom. Is this an angular ui-router, angular, javascript or CSS issue? I've been stuck on this for two hours and not knowing why my html page loads at the bottom instead of the top is really killing my self-esteem as a programmer :/
对于我的生活，我无法弄清楚为什么这个主页加载在底部。这是 angular ui-router、angular、javascript 或 CSS 问题吗？我已经坚持了两个小时，不知道为什么我的 html 页面加载在底部而不是顶部真的扼杀了我作为程序员的自尊：/
Here is the home page: [ URL Redacted ]
这是主页：[网址已编辑]
UPDATE-- I solved this issue. It was with Angular UI-Router. See my answer below for the simple fix.
更新- 我解决了这个问题。它是与 Angular UI-Router 一起使用的。有关简单的修复，请参阅下面的答案。
I use Angular and Angular UI-Router and the set up looks like this...
我使用 Angular 和 Angular UI-Router，设置看起来像这样......
default.jade
默认.jade
doctype html
html(lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product')
include ../includes/head
body(ng-controller="RootController")
block content
include ../includes/foot
index.jade
索引.jade
extends layouts/default
block content
section.container
div(ui-view="header")
div(ui-view="content")
div(ui-view="footer")
Angular Config.js
Angular Config.js
window.app.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to "/"
$urlRouterProvider.otherwise("/");
// Now set up the states
$stateProvider
.state('home', {
url: "/",
views: {
"header": { templateUrl: "views/header/home.html" },
"content": { templateUrl: "views/content/home.html" },
"footer": { templateUrl: "views/footer/footer.html" }
},
resolve: { factory: setRoot }
})
.state('signin', {
url: "/signin",
views: {
"header": { templateUrl: "views/header/signin.html" },
"content": { templateUrl: "views/content/signin.html" },
"footer": { templateUrl: "views/footer/footer.html" }
},
resolve: { factory: setRoot }
})
回答by ac360
Angular UI-Router recently updated it's app so that it automatically scrolls down to new views loaded by default. This was causing my app's pages to load scrolled down. To turn this off simply add the following attribute to your ui-view:
Angular UI-Router 最近更新了它的应用程序，以便它自动向下滚动到默认加载的新视图。这导致我的应用程序页面向下滚动。要关闭此功能，只需将以下属性添加到您的 ui-view 中：
<div ui-view="header" autoscroll="true"></div>
回答by Karan Khanna
here is a possible solution, i used a workoround, since auto scrolling wasnt working for me, so i forced my view to scroll to top. Hope this helps.
这是一个可能的解决方案，我使用了一种解决方法，因为自动滚动对我不起作用，所以我强迫我的视图滚动到顶部。希望这可以帮助。
app.run(['$window', '$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager', '$timeout', function($window, $rootScope, $location, $cookieStore, $state,CacheManager, $timeout){
$rootScope.$on('$viewContentLoaded', function(){
var interval = setInterval(function(){
if (document.readyState == "complete") {
window.scrollTo(0, 0);
clearInterval(interval);
}
},200);
});
}]);
回答by christina
in the run block add:
在运行块中添加：
$rootScope.$on('$stateChangeSuccess', function () {
$anchorScroll();
});
Of course you have to inject the $anchorScroll dependency
当然你必须注入 $anchorScroll 依赖
回答by Ram Fattah
In your App routing module, Add the following to RouterModule
在您的 App 路由模块中，将以下内容添加到 RouterModule
RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})
回答by Mindstormy
I ran into this issue a while ago. What is happening is you are on page 1, scrolled down the page I imagine, then click a button to go to page 2. The router then doesn't readjust your scroll position when you go to the next page. I fixed this by scrolling to top on all route changes.
不久前我遇到了这个问题。发生的情况是您在第 1 页，向下滚动我想象的页面，然后单击按钮转到第 2 页。当您转到下一页时，路由器不会重新调整您的滚动位置。我通过滚动到所有路线变化的顶部来解决这个问题。
