ルートを変更しても新しいページの一番上にスクロールしない

ルートが変更されたときに、少なくとも私にとって望ましくない動作がいくつか見つかりました。チュートリアルhttp://angular.github.io/angular-phonecat/step-11/app/#/phonesのステップ11で、 電話のリストを確認できます。一番下までスクロールして最新のものをクリックすると、スクロールが一番上ではなく、真ん中にあることがわかります。

私は自分のアプリの1つでもこれを見つけました。どうすればこれを一番上までスクロールできますか。私はそれを手動で行うことができますが、これを行うには私にはわからない他のエレガントな方法があるはずだと思います。

では、ルートが変わったときに上にスクロールするエレガントな方法はありますか？

問題は、ngViewが新しいビューをロードするときにスクロール位置を保持することです。$anchorScroll「ビューの更新後にビューポートをスクロールする」ように指示できます（ドキュメントは少しあいまいですが、ここでスクロールすると、新しいビューの上部までスクロールすることになります）。

解決策はautoscroll="true"ngView要素に追加することです：

<div class="ng-view" autoscroll="true"></div>

このコードを実行するだけです

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {

    window.scrollTo(0, 0);

});

このコードは私にとってはうまくいきました。あなたにとってもうまくいくことを願っています。あなたがしなければならないことは、実行ブロックに$ anchorScrollを注入し、リスナー関数をrootScopeに適用することだけです。

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

Angularjsモジュールの呼び出し順序は次のとおりです。

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

RUN BLOCK は、インジェクターが作成された後に実行され、アプリケーションをキックスタートするために使用されます。つまり、新しいルートビューにリダイレクトすると、runブロックのリスナーが

$ anchorScroll（）

これで、新しいルーテッドビューが表示され、スクロールが一番上に表示されます:)

のすべての組み合わせを試すの時間か2の後ui-view autoscroll=true、$stateChangeStart、$locationChangeStart、$uiViewScrollProvider.useAnchorScroll()、$provide('$uiViewScroll', ...)、および他の多くの予想通り、私は仕事にスクロール・ツー・トップ・オン・新しいページを取得できませんでした。

これが最終的に私にとってうまくいきました。pushStateとreplaceStateをキャプチャし、新しいページに移動したときにのみスクロール位置を更新します（戻る/進むボタンはスクロール位置を保持します）。

.run(function($anchorScroll, $window) {
  // hack to scroll to top when navigating to new URLS but not back/forward
  var wrap = function(method) {
    var orig = $window.window.history[method];
    $window.window.history[method] = function() {
      var retval = orig.apply(this, Array.prototype.slice.call(arguments));
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');
})

これが私の（一見）堅牢で完全かつ（かなり）簡潔なソリューションです。ミニファイ互換スタイル（およびモジュールへのangular.module（NAME）アクセス）を使用します。

angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
    $rootScope.$on("$locationChangeSuccess", function() {
                $anchorScroll();
    });
}]);

PS私は、自動スクロール機能がtrueまたはfalseに設定されているかどうかに影響を与えないことを発見しました。

angularjs UIルーターを使用して、私がやっていることはこれです：

    .state('myState', {
        url: '/myState',
        templateUrl: 'app/views/myState.html',
        onEnter: scrollContent
    })

と：

var scrollContent = function() {
    // Your favorite scroll method here
};

どのページでも失敗することはなく、グローバルではありません。

タイトルに記載されている問題に遭遇した（私がしたように）AngularUIルーターも使用している人のための参考情報プラグイン ...

このSOの質問で質問および回答したように、ルートを変更すると、angular-uiルーターはページの下部にジャンプします。
ページが下部に読み込まれる理由を理解できませんか？Angular UI-Routerの自動スクロールの問題

ただし、回答で述べられているように、で言うことでこの動作をオフにすることができautoscroll="false"ますui-view。

例えば：

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div> 

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

あなたはこのjavascriptを使うことができます

$anchorScroll()

ui-routerを使用する場合は（実行時に）使用できます

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
    $window.scrollTo(0, 0);
});

私はこの解決策を見つけました。新しいビューに移動すると、関数が実行されます。

var app = angular.module('hoofdModule', ['ngRoute']);

    app.controller('indexController', function ($scope, $window) {
        $scope.$on('$viewContentLoaded', function () {
            $window.scrollTo(0, 0);
        });
    });

autoScrollをtrueに設定しても問題はなかったので、別のソリューションを選択しました。ルートが変更されるたびにフックし、組み込みの$ anchorScrollサービスを使用して上にスクロールするサービスを作成しました。私のために働く:-)。

サービス：

 (function() {
    "use strict";

    angular
        .module("mymodule")
        .factory("pageSwitch", pageSwitch);

    pageSwitch.$inject = ["$rootScope", "$anchorScroll"];

    function pageSwitch($rootScope, $anchorScroll) {
        var registerListener = _.once(function() {
            $rootScope.$on("$locationChangeSuccess", scrollToTop);
        });

        return {
            registerListener: registerListener
        };

        function scrollToTop() {
            $anchorScroll();
        }
    }
}());

登録：

angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
    pageSwitch.registerListener();
}]);

パーティーには少し遅れましたが、私はあらゆる可能な方法を試しましたが、何も正しく機能しませんでした。これが私のエレガントな解決策です：

私はすべてのページをui-routerで制御するコントローラーを使用しています。認証または検証されていないユーザーを適切な場所にリダイレクトできます。ほとんどの人はアプリの設定にミドルウェアを配置しますが、いくつかのhttpリクエストが必要だったため、グローバルコントローラーの方がうまく機能します。

私のindex.htmlは次のようになります：

<main ng-controller="InitCtrl">
    <nav id="top-nav"></nav>
    <div ui-view></div>
</main>

私のinitCtrl.jsは次のようになります。

angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
    $rootScope.$on('$locationChangeStart', function(event, next, current){
        // middleware
    });
    $rootScope.$on("$locationChangeSuccess", function(){
        $timeout(function() {
            $anchorScroll('top-nav');
       });
    });
});

私は可能な限りすべてのオプションを試しましたが、この方法が最適です。

上記のすべての回答は、予想されるブラウザの動作を妨げます。ほとんどの人が望んでいるのは、「新しい」ページの場合は上にスクロールし、戻る（または進む）ボタンを押すと前の位置に戻るようなものです。

HTML5モードを想定している場合、これは簡単であることがわかります（ただし、これをよりエレガントにする方法を理解している明るい人もいると思います！）：

// Called when browser back/forward used
window.onpopstate = function() { 
    $timeout.cancel(doc_scrolling); 
};

// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
    doc_scrolling = $timeout( scroll_top, 50 );

// Moves entire browser window to top
scroll_top = function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

それが機能する方法は、ルータがそれが一番上にスクロールするつもりであると想定することですが、ブラウザが終了する機会を与えるために少し遅れます。その後、ブラウザーが、変更が戻る/進むナビゲーションによるものであると通知した場合、タイムアウトがキャンセルされ、スクロールは発生しません。

documentウィンドウの上部全体に移動したいので、生のコマンドを使用してスクロールしました。ui-viewスクロールするだけの場合は、上記の手法を使用してautoscroll="my_var"制御my_varする場所を設定します。しかし、ページを「新規」として表示する場合、ほとんどの人はページ全体をスクロールしたいと思うでしょう。

上記の使用UI-ルータは、あなたものの代わりにスワップすることによりNG-ルートを使用することができます$routeChangeSuccessため$stateChangeSuccess。

提供された回答のどれも私の問題を解決しませんでした。私はビュー間でアニメーションを使用しており、スクロールは常にアニメーションの後に発生します。アニメーションの前に上部へのスクロールが発生するように私が見つけた解決策は次のディレクティブです：

yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $animate.on('enter', element, function (element, phase) {

                if (phase === 'start') {

                    window.scrollTo(0, 0);
                }

            })
        }
    };
}]);

次のようにビューに挿入しました。

<div scroll-to-top-before-animation>
    <div ng-view class="view-animation"></div>
</div>

シンプルなソリューション、scrollPositionRestoration有効になっているメインルートモジュールを追加します。
このような：

const routes: Routes = [

 {
   path: 'registration',
   loadChildren: () => RegistrationModule
},
];

 @NgModule({
  imports: [
   RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
  ],
 exports: [
 RouterModule
 ]
 })
  export class AppRoutingModule { }

これを試してくださいhttp://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

リストの一番上までスクロールしますscrollTop（）

やっと必要なものが手に入りました。

私は一番上までスクロールする必要がありましたが、

これはルートごとのレベルで制御できます。
@wkonkelによる上記のソリューションを組み合わせて、単純なnoScroll: trueいくつかのルート宣言にパラメーターをます。それから私は移行でそれをキャッチしています。

全体として、これは新しいトランジションではページの上部にフロートし、Forward/ Backトランジションではページの上部にフロートせず、必要に応じてこの動作をオーバーライドできます。

コード：（前のソリューションと追加のnoScrollオプション）

  // hack to scroll to top when navigating to new URLS but not back/forward
  let wrap = function(method) {
    let orig = $window.window.history[method];
    $window.window.history[method] = function() {
      let retval = orig.apply(this, Array.prototype.slice.call(arguments));
      if($state.current && $state.current.noScroll) {
        return retval;
      }
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');

それをあなたのapp.runブロックに入れて注入してください$state...myApp.run(function($state){...})

次に、ページの一番上までスクロールしたくない場合は、次のようなルートを作成します。

.state('someState', {
  parent: 'someParent',
  url: 'someUrl',
  noScroll : true // Notice this parameter here!
})

これは自動スクロールを含めて私のために働きました

<div class="ngView" autoscroll="true" >