小编典典

如何在AngularJS中处理锚点哈希链接

javascript

你们中 有谁 知道如何在 AngularJS中 很好地处理锚点哈希链接吗?

我为简单的常见问题解答页面添加了以下标记

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

单击上面的任何链接时,AngularJS会拦截并将我路由到一个完全不同的页面(在我的情况下是404页,因为没有路由与这些链接匹配。)

我的第一个想法是创建一个匹配“ / faq /:chapter
的路由,并在相应的控制器中检查$routeParams.chapter匹配的元素之后,然后使用jQuery向下滚动到它。

但是随后AngularJS再次对我大喊大叫,并且无论如何都只是滚动到页面顶部。

那么,这里的任何人过去做过类似的事情,都知道一个好的解决方案吗?

编辑:切换到html5Mode应该可以解决我的问题,但是无论如何我们都必须支持IE8 +,所以我担心这不是一个可以接受的解决方案:/


阅读 280

收藏
2020-04-25

共1个答案

小编典典

基本上,您只需注入它并在控制器中调用它,它将把您滚动到ID为的任何元素 $location.hash()

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

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

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

编辑:与路由一起使用

像往常一样设置您的角度路由,然后只需添加以下代码。

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();  
  });
});

并且您的链接如下所示:

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

甚至更简单:

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();  
  });
});

并且您的链接如下所示:

<a href="#/test#foo">Test/Foo</a>
2020-04-25