私はこれに関して非常に多くの異なる問題を読みましたが、与えられた解決策はどれも私のユースケースに適合しないようです。まず、すべてのリンクにtarget = "_ top"を配置することから始めましたが、実際にはアプリが強制的にリロードされ、機能しません。また、autoscroll = "true"を使用していると言う人もいますが、それはi-view内でのみ機能するようです。
これに関する問題は、index.htmlファイルで、navおよび最初のui-viewの上にある他の静的要素を修正したことです。つまり、他のページに移動すると、ページがそれらの要素を超えてロードされるため、ナビゲーションが失われます。私もこれを体につけてみました:
<body autoscroll="true">
</body>
これも何もしないようです。質問は、新しいページ(ui-routerからの新しいルートの変更)がページの先頭から開始されるようにする方法です。ありがとう!
常に0のクロスブラウザにスクロールしたい場合は、自動スクロールを何もしないでください。これを実行ブロックに配置するだけです:
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
バージョン1.0.6を使用 、$stateChangeSuccess
イベントは廃止され、$transitions
サービス。以下は、状態が変化するたびに上にスクロールするために使用したコードです。
app.run(['$transitions', function ($transitions) {
$transitions.onSuccess({}, function () {
document.body.scrollTop = document.documentElement.scrollTop = 0;
})
}]);
まったく同じ問題があり、ルート変更の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();
});
});
_
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();
});
});
Ui-routerを使用しています。私の実行は次のように見えました:
.run(function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
})
私は他の2つの答えを組み合わせなければなりませんでした。
<div ui-view autoscroll="false"></div>
と組み合わせて
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
注:これはui-routerのv0.2.15にあります
@TaylorMacからの例外の回答と同じことをしましたが、$ locationChangeStartで行いました。
index.run.js:
$rootScope.$on('$locationChangeStart', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});