如何在AngularJS中处理锚点散列链接
你们中有谁知道如何在AngularJS中很好地处理锚点散列链接
对于一个简单的FAQ页面，我有以下标记
<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+，所以我担心这不是一个被接受的解决方案:/
回答 28
Stack Overflow用户
发布于 2013-02-06 05:14:00
你在找$anchorScroll()。
Here's the (crappy) documentation.
基本上，您只需注入它并在您的控制器中调用它，它会将您滚动到在$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>Here is a plunker to demonstrate
编辑:在routing中使用此选项
像往常一样设置您的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 demonstrating scrolling with routing and $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>Stack Overflow用户
发布于 2013-04-11 04:13:02
在我的例子中，我注意到如果我修改了$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);
};Stack Overflow用户
发布于 2015-07-20 04:33:18
创建链接时，无需更改任何路由或任何其他内容，只需使用target="_self"即可
示例：
<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>并在html元素中使用id属性，如下所示：
<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>不需要使用评论中提到的## ;-)
https://stackoverflow.com/questions/14712223
复制相似问题