$anchorScroll

http://docs.angularjs.org/api/ng.$anchorScroll

概要
依存関係
使用方法
デモ

概要

呼び出されると、現在の$location.hash()の値をチェックし、 HTML5の仕様に沿って、関連する要素にスクロールします。

また、$location.hash()を監視し、マッチするアンカーが変更される度にスクロールします。これは、$anchorScrollProvider.disableAutoScrolling()を呼び出すことによって、無効化することが可能です。

依存関係

使用方法

$anchorScroll();

デモ

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="scrollArea" ng-controller="ScrollCtrl">
      <a ng-click="gotoBottom()">Go to bottom</a>
      <a id="bottom"></a> You're at the bottom!
    </div>
  </body>
</html>

#scrollArea {
  height: 350px;
  overflow: auto;
}

#bottom {
  display: block;
  margin-top: 2000px;
}

function ScrollCtrl($scope, $location, $anchorScroll) {
  $scope.gotoBottom = function (){
    // set the location.hash to the id of
    // the element you wish to scroll to.
    $location.hash('bottom');

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

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function ScrollCtrl($scope, $location, $anchorScroll) {
  $scope.gotoBottom = function (){
    // set the location.hash to the id of
    // the element you wish to scroll to.
    $location.hash('bottom');

    // call $anchorScroll()
    $anchorScroll();
  }
}
</script>
  </head>
  <body>
    <div id="scrollArea" ng-controller="ScrollCtrl">
      <a ng-click="gotoBottom()">Go to bottom</a>
      <a id="bottom"></a> You're at the bottom!
    </div>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。