试试这个可以解决锚的问题。

app.run(function($location, $anchorScroll){
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});

在我的例子中，我注意到如果修改$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);
};

您正在寻找$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>

这是一个老帖子，但我花了很长时间研究各种解决方案，所以我想分享一个更简单的解决方案。只是添加target="_self"到<a>标签为我修复了它。该链接工作，并把我带到页面上的适当位置。

然而，Angular仍然在URL中注入了一些奇怪的#，所以在使用这个方法后，你可能会在使用返回按钮导航等方面遇到麻烦。

这可能是ngView的一个新属性，但我已经能够使用ngView autoscroll属性和'double-hashes'让它锚定哈希链接与angular-route一起工作。

ngView(见autoscroll)

(以下代码用于角钢带)

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>

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

href="#/route#anchorID

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