One ❀ lead
The company's new project development, Home navigation to be a floor effect (as shown below), the request can click on the corresponding icon to jump to the floor, because there is no excessive animation jump, also requires better not to use JQ, thought the native operating js dom calculate compatibility top, thinking with anchor achieve Well, the results of some twists and turns, I also get a big head, so there will be a record of it.
We all know that the anchor is common practice by a combination of target id tag to do, the result of an interesting thing happened, I wrote an anchor in the project is not effective.
<a href="#Top">click</a> <div id="Top"></div>
Deliberately to write a small demo verified, the jump is also no problem, so I panicked, and I also did a two-year development of the people, anchors are playing bad?
Open Baidu, enter angularjs use the anchor, the answer is to get the most use $ anchorScroll , so I decided to first understand this method.
II ❀ try to use $ anchorScroll
$ anchorScroll is angularjs built-in module, when invoked, the page will scroll to the specified hash at associate with an element by $ location.hash ( 'to jump to an anchor') to set you to jump anchor, and then to trigger $ anchorScroll the ok by a condition, direct attach simple code here:
<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 () { // set the anchor you want to jump $ the location.hash ( 'Top' ); // call anchorScroll $ $ anchorScroll (); }; } ]);
A separate test no problem, so I introduced to my project, the anchor jump is no problem, but do not know why reported a mistake.
I guess probably angularjs version of the problem, but if not error, I think $ anchorScroll a little trouble, after all, I have several floors icon, too bind the click event several times, although I can hash the anchor set into a variable, write a function like this only make calls when passing different parameters to do hash, but always feel so tired playing an anchor.
Just when I think there is no other solution, my eyes rest on the browser address bar, I found this address is not a bit not quite right?
I anchor the project after the jump address:
After the normal anchor jump address:
How normal is # / anchor , but it is my #! # Anchor , mind a flash, and saw that caused the problem, the problem of routing angularjs triggered.
! I gave my little demo also introduced angularjs route, refresh the page, and sure enough, the address bar automatically becomes a band like:
When we define routing page jump also begin with #, unfortunately is also the anchor after # beginning, the introduction of angular route, due to the impact of the route, the angular anchor set also as routing page jump, and anchor it obviously not identify!, so this ineffective.
So how to get rid of to make routing page #! It, so I managed to locate the $ locationProvider.
Triple ❀ use $ locationProvider
By introduction $ locationProvider page learned (Click for official documents), routing hash default prefix is, we can! $ LocationProvider. HashPrefix ( ) method to modify the default hash prefix, so I give my project to add some configuration:
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
配置在上方，这里我就不再贴一遍代码了。
另外，今天是七夕，公司同事老早就留光了，其实我知道他们一大部分都是单身狗，非得装的自己有约一样。
那么问题来了，为什么我要留下写博客？