Angularjs 可以使用锚链接吗？
即：
<a href="#top">Top</a>
<a href="#middle">Middle</a>
<a href="#bottom">Bottom</a>
<div name="top"></div>
...
<div name="middle"></div>
...
<div name="bottom"></div>
谢谢
【问题讨论】：
标签： angularjs
似乎有几种方法可以做到这一点。
Angular 提供了一个$anchorScroll 服务，但是文档严重缺失，我无法让它工作。
查看http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html，了解$anchorScroll。
我测试的另一种方法是创建自定义指令并使用el.scrollIntoView()。
通过在指令链接函数中基本上执行以下操作，这非常有效：
var el = document.getElementById(attrs.href);
el.scrollIntoView();
但是，当浏览器本身支持这两个功能时，似乎有点夸大其词，对吧？
如果您查看 http://docs.angularjs.org/guide/dev_guide.services.$location 及其 HTML 链接重写部分，您会发现链接未在以下内容中重写：
包含目标元素的链接
示例：
<a href="/ext/link?a=b" target="_self">link</a>
所以，您所要做的就是将target 属性添加到您的链接中，如下所示：
<a href="#anchorLinkID" target="_self">Go to inpage section</a>
Angular 默认使用浏览器，因为它是一个锚链接而不是不同的基本 url，浏览器会根据需要滚动到正确的位置。
我选择了选项 3，因为它最好在这里依赖本机浏览器功能，并且可以节省我们的时间和精力。
需要注意的是，在成功滚动和散列更改后，Angular 会跟进并将散列重写为其自定义样式。但是，浏览器已经完成了它的业务，你可以开始了。
【讨论】：
我不知道这是否回答了您的问题，但是可以，您可以使用 angularjs 链接，例如：
<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>
AngularJS 网站上有一个很好的例子：
http://docs.angularjs.org/api/ng.directive:ngHref
更新：AngularJS 文档有点晦涩难懂，也没有提供好的解决方案。对不起！
您可以在这里找到更好的解决方案：How to handle anchor hash linking in AngularJS
【讨论】：
您可以尝试使用anchorScroll。
所以控制器是：
app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
});
还有观点：
<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>
...并且没有任何关于锚点 ID 的秘密：
<div id="foo">
This is #foo
</div>
【讨论】：
$location.hash() 调用之后的$anchorScroll() 调用是不必要的，因为$anchorScroll 会自动监视$location.hash()。
$anchorScroll() 仍会滚动到新位置。
$anchorScroll 确实是这个问题的答案，但是在更新的 Angular 版本中有更好的方法来使用它。
现在，$anchorScroll 接受哈希作为可选参数，因此您根本不必更改 $location.hash。 (documentation)
这是最好的解决方案，因为它根本不影响路线。我无法让任何其他解决方案发挥作用，因为我正在使用 ngRoute，并且在我设置 $location.hash(id) 后，该路由将立即重新加载，然后 $anchorScroll 才能发挥它的魔力。
这里是如何使用它...首先，在指令或控制器中：
$scope.scrollTo = function (id) {
$anchorScroll(id);
}
然后在视图中：
<a href="" ng-click="scrollTo(id)">Text</a>
另外，如果您需要考虑固定导航栏（或其他 UI），您可以像这样设置 $anchorScroll 的偏移量（在主模块的 run 函数中）：
.run(function ($anchorScroll) {
//this will make anchorScroll scroll to the div minus 50px
$anchorScroll.yOffset = 50;
});
【讨论】：
我遇到了同样的问题，但这对我有用：
<a ng-href="javascript:void(0);#tagId"></a>
【讨论】：
为我工作：
<a onclick='return false;' href="" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" ng-href="#profile#collapse{{$index}}"> blalba </a>
【讨论】：
您只需将 target="_self" 添加到您的链接中
例如。 <a href="#services" target="_self">Services</a><div id="services"></div>
【讨论】：
或者你可以简单地写：
ng-href="\#yourAnchorId"
请注意井号前面的反斜杠
【讨论】：
ng-href="##anchorId" 为我工作（Angular 1.2.21）。这就是我注意到 $location.hash('anchorId') 所做的事情。
如果您使用的是 SharePoint 和 Angular，请按以下方式操作：
<a ng-href="{{item.LinkTo.Url}}" target="_blank" ng-bind="item.Title;" ></a>
在哪里 LinkTo 和 Title 是 SharePoint 列。
【讨论】：
对我来说最好的选择是创建一个指令来完成这项工作，因为$location.hash() 和
$anchorScroll() 劫持 URL，给我的 SPA 路由带来很多问题。
MyModule.directive('myAnchor', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, elem, attrs, ngModel) {
return elem.bind('click', function() {
//other stuff ...
var el;
el = document.getElementById(attrs['myAnchor']);
return el.scrollIntoView();
});
}
};
});
【讨论】：
您还可以从控制器内部导航到 HTML id
$location.hash('id_in_html');
【讨论】：