无法弄清楚为什么页面在底部加载？ Angular UI-Router自动滚动问题

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 :/

对于我的生活，我无法弄清楚为什么这个主页在底部加载。这是一个角度ui路由器，角度，JavaScript或CSS问题？我已经被困在这两个小时了，不知道为什么我的html页面加载到底部而不是顶部是真的让我作为程序员的自尊心：

Here is the home page: [ URL Redacted ]

这是主页：[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

default.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

index.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 }
    })

4 个解决方案

#1

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>

#2

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.

这是一个可能的解决方案，我使用了一个workoround，因为自动滚动不适合我，所以我强迫我的视图滚动到顶部。希望这可以帮助。

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);

});



}]);

#3

in the run block add:

在运行块中添加：

$rootScope.$on('$stateChangeSuccess', function () {
  $anchorScroll();
 });

Of course you have to inject the $anchorScroll dependency

当然你必须注入$ anchorScroll依赖项

#4

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页。当你转到下一页时，路由器不会重新调整你的滚动位置。我通过在所有路线更改中滚动到顶部来修复此问题。

#1

<div ui-view="header" autoscroll="true"></div>

#2