AngularJS 中的錨點哈希處理

使用錨點瀏覽網頁是一種常見的做法，特別是對於具有多個部分的長頁面。然而，在 AngularJS 應用程式中，錨連結處理可能會出現問題。

當點擊 AngularJS 中的錨定連結時，預設行為是攔截點擊並將使用者重新導向到不同的頁面。為了解決這個問題，AngularJS 提供了一個解決方案。

$anchorScroll()

AngularJS 中的 $anchorScroll() 服務是專門為處理錨點哈希連結而設計的。該服務允許您根據 URL 中的哈希值滾動到當前頁面上的元素。

要使用 $anchorScroll()，只需將其註入控制器並在必要時調用它即可。此服務採用一個可選的 id 參數來指定要捲動到的元素。如果沒有提供 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 應用程式中順利處理錨點哈希鏈接，為導航具有多個部分的長頁面提供無縫的用戶體驗。