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

Question

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

这是主页:[URL Redacted]

更新 - 我解决了这个问题.这是Angular UI-Router.有关简单修复,请参阅下面的答案.

我使用Angular和Angular UI-Router,设置看起来像这样......

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

extends layouts/default

block content
  section.container
    div(ui-view="header")
    div(ui-view="content")
    div(ui-view="footer")

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

Answer 1

Angular UI-Router最近更新了它的应用程序,以便它自动向下滚动到默认加载的新视图.这导致我的应用程序页面向下滚动.要关闭它,只需将以下属性添加到您的ui-view:

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

Answer 2

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

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

});



}]);

Answer 3

在运行块中添加:

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

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

Answer 4

在您的 App 路由模块中，将以下内容添加到 RouterModule

RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'})