web-dev-qa-db-ja.com

AngularJS + Safari：ページが切り替わったときにページを強制的に一番上にスクロールする

AngularJSを使用して、サファリのみの奇妙なスクロール動作をしています。

ユーザーがページを切り替えるたびに、ページはあたかもAJAXであるかのように変更されます。 AngualrJSにあることは理解していますが、結果として生じる動作は、ユーザーがページを切り替えたときにブラウザーが上にスクロールしないことです。

新しいコントローラーが使用されているときはいつでもブラウザーを強制的に一番上までスクロールさせようとしましたが、何もしないようです。

すべてのコントローラーの上部で次のJSを実行しています。

document.body.scrollTop = document.documentElement.scrollTop = 0;

これはSafariのみのバグでもあり、ページが変更されると他のすべてのブラウザーが上部にスクロールします。誰かが同様の問題に遭遇したか、それを解決するより良い方法を考えていますか？

angularjssafari
24
Neil

$ anchorScroll（）を使用してみましたか？文書化されています ここ 。

14
The WebMacheter

$window.scrollTo(0,0)はページの上部までスクロールします。

アニメーションもサポートする素敵なプラグイン（pure angularJS）を見つけました。

https://github.com/durated/angular-scroll

50
Alex C

これを使用できます：

.run(["$rootScope", "$window", '$location', function($rootScope, $window,  $location) {

    $rootScope.$on('$routeChangeStart', function(evt, absNewUrl, absOldUrl){
        $window.scrollTo(0,0);    //scroll to top of page after each route change
}}])

または、タブスイッチの場合は、$ window.scrollTo（0,0）を使用できます。あなたのコントローラーで

19
danikoren

CordovaアプリでAngularJSを使用しているときに同じ問題が発生しました。通常のブラウザまたはAndroidでは問題ありませんが、iosではNeilの説明と同じ動作になります。

$ anchorScrollのAngularJSのドキュメントはそれほど素晴らしいものではないので、このリンクを投稿してもっと役立つようにしたいと思いました。

http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html

3
Nico

$ anchorScrollを使用できます

$scope.gotoTop = function (){
  // set the location.hash to the id of
  // the element you wish to scroll to.
  $location.hash('top');

  // call $anchorScroll()
  $anchorScroll();
};
3
Fizer Khan

@ nonstopbutton のように、autoscroll="true"をngView要素に追加しても機能しました。これは、回答に対するコメントであり、彼の返信を見ることは容易ではなかったため、ここで言及します。

詳細はこちら： https://stackoverflow.com/a/24549173/1578861

2
ilovemedia

コントローラでは、実際に_$_をwindowから削除し、_$window_をコントローラに挿入することなく単にputwindow.scrollTo(0,0);することができます。それは私にとって素晴らしい仕事でした。

0
AAW238

locationChangeSuccessイベントの後に$ window.scrollTo（0,0）;を呼び出します：

$rootScope.$on("$locationChangeSuccess",
function(event, current, previous, rejection) {
  $window.scrollTo(0,0);
});
0
Abel

Chromeでも同様の問題があります。ただし、特定の外部ライブラリがこの問題を引き起こしているかどうかはわかりません。

しかし、私はこのコードをアプリレベルで作成しましたが、動作します。

 $rootScope.$on('$viewContentLoaded', function(){
                $window.scrollTo(0, 0);
            });
0
codebased