有时在angularjs应用哈希导航不工作和bootstrap jquery javascript库大量使用这种类型的导航，使其工作添加target="_self"到锚标签。 例如:<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

如果你总是知道路径，你可以像这样简单地追加锚:

href="#/route#anchorID

where route是当前的角路由，anchorID匹配页面某处的<a id="anchorID">

您正在寻找$anchorScroll()。

这是(蹩脚的)文档。

这是来源。

基本上你只需要注入它并在控制器中调用它，它就会滚动到$location。hash()中id为的任何元素

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>

这里有一个活塞来演示

EDIT:用于路由

像往常一样设置angular路由，然后添加以下代码。

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>

这是一个Plunker演示滚动路由和$anchorScroll

更简单的是:

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>

在我的例子中，我注意到如果修改$location.hash()，路由逻辑就开始起作用了。下面的技巧奏效了。

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

如果你不喜欢使用ng-click，这里有一个替代解决方案。它使用过滤器根据当前状态生成正确的url。我的例子使用ui.router。

这样做的好处是用户可以在鼠标悬停时看到链接的位置。

<a href="{{ 'my-element-id' | anchor }}">My element</a>

过滤器:

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

<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="faq-3">Question 3</h3>