如何在 AngularJS 應用程式中實現平滑的錨點哈希連結？

在AngularJS 處理錨點雜湊連結

如果您在AngularJS 中遇到一個簡單點連結問題，有一個簡單點連結的解決方案： $ anchorScroll().

AngularJS 提供了$anchorScroll() 服務，它允許您輕鬆滾動到具有在$location.hash() 中找到的ID 的任何元素。使用方法如下：

<code class="javascript">app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});</code>

在標記中，您可以使用ng-click 指令來觸發滾動操作：

<code class="html"><a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div></code>

與AngularJS 集成路由

與AngularJS 集成路由

1. 與AngularJS 集成路由
與AngularJS 集成路由
2. 與AngularJS 集成路由

<code class="javascript">app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});</code>

與AngularJS 集成路由

要將$anchorScroll() 與AngularJS 路由結合使用，請依照下列步驟操作：

<code class="html"><a href="#/test?scrollTo=foo">Test/Foo</a></code>

<code class="javascript">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();  
  });
});</code>

像平常一樣設定路由

。

<code class="html"><a href="#/test#foo">Test/Foo</a></code>

新增以下程式碼：

這是一個帶有路由的範例連結：對於更簡單的方法，您可以使用此程式碼：以及相應的連結：透過這些解決方案，您可以無縫連結到錨點並捲動到AngularJS 應用程式中的相應內容。

以上是如何在 AngularJS 應用程式中實現平滑的錨點哈希連結？的詳細內容。更多資訊請關注PHP中文網其他相關文章！