web-dev-qa-db-ja.com

AngularJSでページの上部にスクロールする方法は?

Anglejsを使用してajax呼び出し応答を取得した後、ページの上部にスクロールしたいです。基本的に、ページの上部にアラートメッセージを表示しているので、ajax応答を受信したときにアラートメッセージに焦点を合わせたいと思います。

ありがとう

67
Farjad Hasan

使用できます

$window.scrollTo(x, y);

ここで、xは水平軸に沿ったピクセルで、yは垂直軸に沿ったピクセルです。

  1. トップへスクロール

    $window.scrollTo(0, 0);
    
  2. 要素に焦点を当てる

    $window.scrollTo(0, angular.element('put here your element').offsetTop);   
    

Example

更新

$anchorScroll を使用することもできます

Example

149
Alexander T.

$anchorScroll を使用できます。

依存関係として$anchorScrollを挿入し、一番上までスクロールしたいときはいつでも$anchorScroll()を呼び出します。

30
Muhammad Reda

理想的には、該当するコントローラーまたはディレクティブのいずれかから実行する必要があります。依存性注入として$anchorScroll$locationを使用します。

次に、この2つのメソッドを次のように呼び出します。

$location.hash('scrollToDivID');
$anchorScroll();

ここで、scrollToDivIDはスクロールするIDです。

次のようにエラーメッセージdivに移動するとします。

<div id='scrollToDivID'>Your Error Message</div>

詳細については、こちらをご覧ください documentation

12

以下を使用して、純粋なJavaScriptを使用してこの状況に対処することもできます。

window.scrollTo(x-coord, y-coord);
3
Ignacio Ara