背景：
由於其預設值，在AngularJS 中導航錨點哈希鏈結可能會很棘手路由機制。當點擊錨連結導致 AngularJS 路由到不同頁面而不是平滑滾動到現有頁面中的預期元素時，就會出現此問題。
解決方案：使用 $anchorScroll()
為了解決這個問題，AngularJS 提供了寶貴的 $anchorScroll() 服務。該服務允許開發人員根據 ID 屬性手動捲動到特定元素。透過利用此功能，您可以控制錨連結的滾動行為並輕鬆在同一頁面內導航。
控制器中的實作：
使用 $anchorScroll() ，將其註入控制器並定義一個將所需元素 ID 作為參數的函數。在此函數中，更新 $location.hash() 以符合目標元素的 ID，然後呼叫 $anchorScroll()。
app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
});用法：
地點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中文網其他相關文章！
