背景：
由于其默认值，在 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中文网其他相关文章！
