web-dev-qa-db-ja.com

ページが下部に読み込まれる理由を理解できませんか？ Angular UIルーターの自動スクロールの問題

私の人生では、このホームページが一番下にロードされる理由がわかりません。これはangular ui-router、angular、javascript、CSSの問題ですか？）私はこれに2時間行き詰まり、htmlページが上部ではなく下部に読み込まれる理由がわかりません。プログラマーとしての私の自尊心を本当に殺します：/

これがホームページです：[編集されたURL]

[〜＃〜] update [〜＃〜]-この問題を解決しました。 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 }
    })
javascriptcssangularjsexpressangular-ui-router
27
ac360

Angular UI-Routerは最近、アプリを更新して、デフォルトで読み込まれる新しいビューに自動的にスクロールダウンするようにしました。これにより、アプリのページがスクロールダウンして読み込まれていました。これをオフにするには、次の属性をui-viewに追加するだけです。

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

これが可能な解決策です。自動スクロールが機能しなかったので、私はワークラウンドを使用しました。お役に立てれば。

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

});



}]);
10
Karan Khanna

実行ブロックに追加：

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

もちろん$ anchorScroll依存関係を注入する必要があります

7
christina

アプリのルーティングモジュールで、RouterModuleに以下を追加します

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

先ほどこの問題に遭遇しました。何が起こっているのですか。1ページ目です。想像したページを下にスクロールし、ボタンをクリックして2ページに移動します。次のページに移動しても、ルーターはスクロール位置を再調整しません。すべてのルート変更で上にスクロールしてこれを修正しました。

0
Mindstormy