アンカー リンクを AngularJS ルーティングでシームレスに機能させるにはどうすればよいですか?

AngularJS でアンカーをスムーズにナビゲートする

背景:

アンカー ハッシュ リンクのナビゲートは、AngularJS のデフォルトのせいで難しい場合がありますルーティングメカニズム。この問題は、アンカー リンクをクリックすると、既存のページ内の目的の要素までスムーズにスクロールするのではなく、AngularJS が別のページにルーティングされる場合に発生します。

解決策: $anchorScroll() を使用する

これを解決するために、AngularJS は非常に貴重な $anchorScroll() サービスを提供します。このサービスを使用すると、開発者は ID 属性に基づいて特定の要素まで手動でスクロールできます。この機能を利用すると、アンカー リンクのスクロール動作を制御し、同じページ内を簡単に移動できます。

コントローラーでの実装:

$anchorScroll() を使用するには、それをコントローラーに挿入し、目的の要素 ID を引数として受け取る関数を定義します。この関数内で、ターゲット要素の ID と一致するように $location.hash() を更新し、$anchorScroll() を呼び出します。

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

使用法:

Place HTML マークアップにアンカー リンクを追加し、scrollTo() 関数にバインドします。このリンクをクリックすると、ページ上の対応する要素までスクロールします。

<a ng-click="scrollTo('foo')">Foo</a>
<div id="foo">Here you are</div>

Angular ルーティングとの統合:

このソリューションを Angular と連携させるにはルーティングするには、次のコードを実行ブロックに追加します。このコードはルートの変更をリッスンし、変更が成功すると、URL のscrollTo パラメーターで指定された要素にスクロールします。

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();
  });
});

簡易アプローチ:

さらに単純な解決策として、すべてのハッシュ変更を処理するように実行ブロックを変更できます。これにより、ハッシュ値と一致する ID を持つ任意の要素までスクロールします。

app.run(function($rootScope, $location, $anchorScroll) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();
  });
});

以上がアンカー リンクを AngularJS ルーティングでシームレスに機能させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。