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

アンカーを使用して Web ページ内を移動することは、特に複数のセクションを持つ長いページの場合に一般的な方法です。ただし、AngularJS アプリケーションでは、アンカー リンクの処理に問題が生じる可能性があります。

AngularJS でアンカー リンクをクリックすると、デフォルトの動作ではクリックが中断され、ユーザーが別のページにリダイレクトされます。この問題に対処するために、AngularJS は解決策を提供します。

$anchorScroll()

AngularJS の $anchorScroll() サービスは、アンカー ハッシュ リンクを処理するように特別に設計されています。このサービスを使用すると、URL のハッシュ値に基づいて現在のページの要素にスクロールできます。

$anchorScroll() を使用するには、それをコントローラーに挿入し、必要に応じて呼び出すだけです。このサービスは、スクロール先の要素を指定するオプションの id パラメーターを受け取ります。 ID が指定されていない場合は、$location.hash().

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

Test/Foo

簡略化されたアプローチ

さらに単純なアプローチについては、次の変更を使用できます。コード:

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();  
  });
});

アンカー リンクは次のようになります:

Test/Foo

これらのテクニックを活用することで、AngularJS アプリケーションでアンカー ハッシュ リンクをスムーズに処理でき、複数のセクションを持つ長いページをナビゲートするためのシームレスなユーザー エクスペリエンスを提供できます。