angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

看新闻不看热闹 發表於 2019-8-7 20:28:00

angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

壹 ❀ 引
公司新项目开发中，首页要做个楼层导航效果(如下图)，要求能点击图标对应跳到楼层即可，因为不需要跳转过度动画，也要求最好别用JQ，想着原生js操作dom计算top的兼容性，想着用锚点实现算了，结果一番波折，也是弄的我头大，所以这里就做个记录吧。
<img src="https://img2018.cnblogs.com/blog/1213309/201908/1213309-20190807184808872-810985720.png" alt="" style="display: block; margin-left: auto; margin-right: auto">
我们都知道锚点一般做法是通过a标签结合目标id来做，结果有趣的事情发生了，我在项目中写的锚点就是不生效。
<div class="cnblogs_code">
<pre><a href="#Top">click</a>
<div id="Top"></div></pre>
</div>
特意去写了个小demo验证了下，跳转也没问题，这样我就慌了，我也是做了2年开发的人了，锚点都玩不好了？
打开百度，输入angularjs使用锚点，得到最多的回答就是使用$anchorScroll，所以我先决定先了解此方法。
 贰 ❀ 尝试使用$anchorScroll
$anchorScroll是angularjs自带的模块，当被调用时，页面会滚动到与元素相关联的指定的hash处，通过$location.hash(‘要跳转的锚点’)来设置你要跳转的锚点，再通过一个条件来触发$anchorScroll就ok了，这里直接附上简单的代码：
<div class="cnblogs_code">
<pre><div ng-controller="myCtrl">
<divid="top" style="height:1000px">我是顶部</div>
<a ng-click="toTop()">click</a>
</div></pre>
</div>
<div class="cnblogs_code">
<pre>angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$location', '$anchorScroll',
 function ($scope, $location, $anchorScroll) {
 $scope.toTop = function () {
 //设置你要跳转的锚点
 $location.hash('top');
 //调用$anchorScroll
 $anchorScroll();
 };
 }
]);</pre>
</div>
单独测试完全没问题，于是我引入到了我的项目中，锚点跳转没有问题，但不知道为啥报了个错。
<img src="https://img2018.cnblogs.com/blog/1213309/201908/1213309-20190807194334257-544526466.png" alt="" style="display: block; margin-left: auto; margin-right: auto">
我猜测可能是angularjs版本问题，但就算不报错，我觉得$anchorScroll有点麻烦，毕竟我的楼层有好几个图标，得绑定好几次点击事件，虽然我能将hash中锚点设置成一个变量，这样只用写一个函数让调用时传递不同参数做hash，但始终觉得这样玩一个锚点太累了。
就在我思考还有没有别的解决方案时，我的目光停留在了浏览器地址栏上，我发现这个地址是不是有点不太对？
我项目锚点跳转后的地址：
<img src="https://img2018.cnblogs.com/blog/1213309/201908/1213309-20190807195102733-985077152.png" alt="" style="display: block; margin-left: auto; margin-right: auto">
正常锚点跳转后的地址：
<img src="https://img2018.cnblogs.com/blog/1213309/201908/1213309-20190807195334598-193467594.png" alt="" style="display: block; margin-left: auto; margin-right: auto">
怎么正常的是/#锚点，我的却是#!#锚点，脑中灵光一闪，这才发现引发问题所在，是angularjs的路由所引发的问题。
我给我的小demo也引入了angularjs路由，刷新页面，果不其然，地址栏自动就变成了带!的样子：
<img src="https://img2018.cnblogs.com/blog/1213309/201908/1213309-20190807195713197-1767114117.png" alt="" style="display: block; margin-left: auto; margin-right: auto">
我们在定义路由页面跳转时也是以#开头，不巧的是锚点也是#开头，引入angular路由后，由于路由的影响，angular把设置的锚点也当成路由页面跳转了，锚点很明显识别不了!，所以这才失效了。
那么怎么让去除掉路由页的#!呢，于是我成功定位到了$locationProvider。
 叁 ❀ 使用$locationProvider
通过$locationProvider页面介绍了解到(点击查看官方文档)，路由哈希默认前缀就是!，而我们可以通过$locationProvider.hashPrefix()方法来修改默认hash前缀，于是我给我的项目添加了一段配置：
<div class="cnblogs_code">
<pre>angular.module('myApp', [])
.controller('myCtrl', [, function () {

}]).config([
 "$locationProvider",
 function ($locationProvider) {
 $locationProvider.hashPrefix("");
 $locationProvider.html5Mode({
 rewriteLinks: false
 });
 }
]);</pre>
</div>
 再进入项目测试我之前的锚点，完全没问题了：
<img src="https://img2018.cnblogs.com/blog/1213309/201908/1213309-20190807201339415-1374124166.gif" alt="" style="display: block; margin-left: auto; margin-right: auto">
 肆 ❀ 总结
一个小小的锚点，至少今天是把我给整懵了，其实说到底，还是因为angularjs使用不够深层次的问题，对于hash等配置的不敏感，在找问题时出发点就错了。当然，还是总结出了2种解决方案：
第一种，使用$anchorScroll
我不知道其他人有没有发现，其实只要注入了$anchorScroll服务，不用写任何触发事件，锚点就可以正常使用了，哪怕是引用了路由的情况。
<div class="cnblogs_code">
<pre><div id="top1" style="height:500px">我是顶部1</div>
<div id="top2" style="height:500px">我是顶部2</div>
<div id="top3" style="height:500px">我是顶部3</div>
<a href="#top1">click</a>
<a href="#top2">click</a>
<a href="#top3">click</a></pre>
</div>
<div class="cnblogs_code">
<pre>angular.module('myApp', ['ui.router'])
.controller('myCtrl', ['$anchorScroll', function ($anchorScroll) {

}]);</pre>
</div>
这里我只是注入了$anchorScroll服务，未定义任何点击事件，而且也引入了angularui的路由，比较神奇的是，锚点一切正常，当然这完全是我瞎猫碰老鼠，碰巧发现的。
第二种，使用$locationProvider
配置在上方，这里我就不再贴一遍代码了。
另外，今天是七夕，公司同事老早就留光了，其实我知道他们一大部分都是单身狗，非得装的自己有约一样。
<img src="https://img2018.cnblogs.com/blog/1213309/201908/1213309-20190807202326670-1028840630.png" alt="" style="display: block; margin-left: auto; margin-right: auto">
那么问题来了，为什么我要留下写博客？ 
来源：https://www.cnblogs.com/echolun/p/11316548.html

頁: [1]

琼殿技术论坛's Archiver

angularjs中使用锚点，angular路由导致锚点失效的两种解决方案