web-dev-qa-db-ja.com

UIルーターとAngularjsを使用してTOPに自動スクロールする

私はこれに関して非常に多くの異なる問題を読みましたが、与えられた解決策はどれも私のユースケースに適合しないようです。まず、すべてのリンクにtarget = "_ top"を配置することから始めましたが、実際にはアプリが強制的にリロードされ、機能しません。また、autoscroll = "true"を使用していると言う人もいますが、それはi-view内でのみ機能するようです。

これに関する問題は、index.htmlファイルで、navおよび最初のui-viewの上にある他の静的要素を修正したことです。つまり、他のページに移動すると、ページがそれらの要素を超えてロードされるため、ナビゲーションが失われます。私もこれを体につけてみました：

<body autoscroll="true">
</body>

これも何もしないようです。質問は、新しいページ（ui-routerからの新しいルートの変更）がページの先頭から開始されるようにする方法です。ありがとう！

javascriptangularjsangular-ui-router
65
Mr. BigglesWorth

常に0のクロスブラウザにスクロールしたい場合は、自動スクロールを何もしないでください。これを実行ブロックに配置するだけです：

$rootScope.$on('$stateChangeSuccess', function() {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
});
148
TaylorMac

バージョン1.0.6を使用 、$stateChangeSuccessイベントは廃止され、$transitionsサービス。以下は、状態が変化するたびに上にスクロールするために使用したコードです。

app.run(['$transitions', function ($transitions) {
    $transitions.onSuccess({}, function () {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    })
}]);
14
mdickin

まったく同じ問題があり、ルート変更のnavbarを修正し、ページの読み込みがページを部分的にスクロールダウンしました。

次のように_autoscroll="false"_を_ui-view_に追加しました。

_<div ui-view="main" autoscroll="false"></div>
_

編集

このメソッドをテストしたところ、ちょっとした汚いハックですが、動作します。 angular services _$anchorScroll_＆_$location_）をui-router _.state_ configの関連コントローラーにインポートしてから、ui-routerで_$watch_を使用します_$stateParams_は、ルート/状態の変更時に$location.hash('top');を呼び出します。

https://docs.angularjs.org/api/ng/service/ $ anchorScroll

https://docs.angularjs.org/api/ng/service/ $ location＃hash

_.controller('myCtrl', function ($location, $anchorScroll, $scope, $stateParams) {

    $scope.$watchCollection('$stateParams', function() {
       $location.hash('top');
       $anchorScroll();
    });
});
_
12
cheekybastard

Angularこのためのサービスがあります。 https://docs.angularjs.org/api/ng/service/$anchorScroll

サンプルコード：

.run(function ($rootScope, $state, $stateParams, $anchorScroll) {

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

});

特定の要素までスクロールする場合

.run(function ($rootScope, $state, $stateParams, $anchorScroll) {

    $rootScope.$on('$stateChangeStart', function () {
       // set the location.hash to the id of
       // the element you wish to scroll to.
        $location.hash('bottom');

       // call $anchorScroll()
        $anchorScroll();
    });

});
4
Dilhan Jayathilake

Ui-routerを使用しています。私の実行は次のように見えました：

.run(function($rootScope, $state, $stateParams){
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
  $rootScope.$on('$stateChangeSuccess', function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }); 
})
3
Bessie Malek

私は他の2つの答えを組み合わせなければなりませんでした。

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

と組み合わせて

$rootScope.$on('$stateChangeSuccess', function() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
});

注：これはui-routerのv0.2.15にあります

2
rgpass

@TaylorMacからの例外の回答と同じことをしましたが、$ locationChangeStartで行いました。

index.run.js：

$rootScope.$on('$locationChangeStart', function() {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
});
2
sigmapi13