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

 壹 ❀ 引

公司新项目开发中，首页要做个楼层导航效果(如下图)，要求能点击图标对应跳到楼层即可，因为不需要跳转过度动画，也要求最好别用JQ，想着原生js操作dom计算top的兼容性，想着用锚点实现算了，结果一番波折，也是弄的我头大，所以这里就做个记录吧。

我们都知道锚点一般做法是通过a标签结合目标id来做，结果有趣的事情发生了，我在项目中写的锚点就是不生效。

<a href="#Top">click</a>
<div id="Top"></div>

特意去写了个小demo验证了下，跳转也没问题，这样我就慌了，我也是做了2年开发的人了，锚点都玩不好了？

打开百度，输入angularjs使用锚点，得到最多的回答就是使用$anchorScroll，所以我先决定先了解此方法。

 贰 ❀ 尝试使用$anchorScroll

$anchorScroll是angularjs自带的模块，当被调用时，页面会滚动到与元素相关联的指定的hash处，通过$location.hash(‘要跳转的锚点’)来设置你要跳转的锚点，再通过一个条件来触发$anchorScroll就ok了，这里直接附上简单的代码：

<div ng-controller="myCtrl">
  <divid="top" style="height:1000px">我是顶部</div>
  <a ng-click="toTop()">click</a>
</div>

angular.module('myApp', [])
    .controller('myCtrl', ['$scope', '$location', '$anchorScroll',
        function ($scope, $location, $anchorScroll) {
            $scope.toTop = function () {
                //设置你要跳转的锚点
                $location.hash('top');
                //调用$anchorScroll
                $anchorScroll();
            };
        }
    ]);

单独测试完全没问题，于是我引入到了我的项目中，锚点跳转没有问题，但不知道为啥报了个错。

我猜测可能是angularjs版本问题，但就算不报错，我觉得$anchorScroll有点麻烦，毕竟我的楼层有好几个图标，得绑定好几次点击事件，虽然我能将hash中锚点设置成一个变量，这样只用写一个函数让调用时传递不同参数做hash，但始终觉得这样玩一个锚点太累了。

就在我思考还有没有别的解决方案时，我的目光停留在了浏览器地址栏上，我发现这个地址是不是有点不太对？

我项目锚点跳转后的地址：

正常锚点跳转后的地址：

怎么正常的是#/锚点，我的却是#!#锚点，脑中灵光一闪，这才发现引发问题所在，是angularjs的路由所引发的问题。

我给我的小demo也引入了angularjs路由，刷新页面，果不其然，地址栏自动就变成了带!的样子：

我们在定义路由页面跳转时也是以#开头，不巧的是锚点也是#开头，引入angular路由后，由于路由的影响，angular把设置的锚点也当成路由页面跳转了，锚点很明显识别不了!，所以这才失效了。

那么怎么让去除掉路由页的#!呢，于是我成功定位到了$locationProvider。

 叁 ❀ 使用$locationProvider

通过$locationProvider页面介绍了解到(点击查看官方文档)，路由哈希默认前缀就是!，而我们可以通过$locationProvider.hashPrefix()方法来修改默认hash前缀，于是我给我的项目添加了一段配置：

angular.module('myApp', [])
    .controller('myCtrl', [, function () {

    }]).config([
        "$locationProvider",
        function ($locationProvider) {
            $locationProvider.hashPrefix("");
            $locationProvider.html5Mode({
                rewriteLinks: false
            });
        }
    ]);

再进入项目测试我之前的锚点，完全没问题了：

 肆 ❀ 总结

一个小小的锚点，至少今天是把我给整懵了，其实说到底，还是因为angularjs使用不够深层次的问题，对于hash等配置的不敏感，在找问题时出发点就错了。当然，还是总结出了2种解决方案：

第一种，使用$anchorScroll

我不知道其他人有没有发现，其实只要注入了$anchorScroll服务，不用写任何触发事件，锚点就可以正常使用了，哪怕是引用了路由的情况。

<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>

angular.module('myApp', ['ui.router'])
    .controller('myCtrl', ['$anchorScroll', function ($anchorScroll) {

    }]);

这里我只是注入了$anchorScroll服务，未定义任何点击事件，而且也引入了angularui的路由，比较神奇的是，锚点一切正常，当然这完全是我瞎猫碰老鼠，碰巧发现的。

第二种，使用$locationProvider

配置在上方，这里我就不再贴一遍代码了。

另外，今天是七夕，公司同事老早就留光了，其实我知道他们一大部分都是单身狗，非得装的自己有约一样。

那么问题来了，为什么我要留下写博客？