如何使锚链接与 AngularJS 路由无缝配合？

在 AngularJS 中无缝地导航锚点

背景：

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