AngularJS アプリケーションでスムーズなアンカー ハッシュ リンクを実装するにはどうすればよいですか?

AngularJS でのアンカー ハッシュ リンクの処理

AngularJS でのアンカー ハッシュ リンクの問題に直面している場合、利用可能な簡単な解決策があります。 $ anchorScroll().

AngularJS は、$anchorScroll() サービスを提供します。これにより、$location.hash() で見つかった ID を持つ任意の要素に簡単にスクロールできます。使用方法は次のとおりです:

<code class="javascript">app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});</code>

マークアップで、ng-click ディレクティブを使用してスクロール アクションをトリガーできます:

<code class="html"><a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div></code>

AngularJS との統合ルーティング

AngularJS ルーティングで $anchorScroll() を使用するには、次の手順に従います:

1. 通常どおりにルーティングを構成します。
2. 次のコードを追加します。

<code class="javascript">app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});</code>

ルーティングを含むリンクの例を次に示します。

<code class="html"><a href="#/test?scrollTo=foo">Test/Foo</a></code>

さらに単純なアプローチとして、次のようにします。このコードを使用します:

<code class="javascript">app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});</code>

および対応するリンク:

<code class="html"><a href="#/test#foo">Test/Foo</a></code>

これらのソリューションを使用すると、アンカーにシームレスにリンクし、AngularJS アプリケーション内の対応するコンテンツにスクロールできます。

以上がAngularJS アプリケーションでスムーズなアンカー ハッシュ リンクを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。