URL锚点HTML定位技术机制
⼀、锚点是什么
锚点就等同于⽕影中的“飞雷神之术”，我们先看百科中的解释：
使⽤命名锚记可以在⽂档中设置标记，这些标记通常放在⽂档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。⾸先，创建命名锚记，然后创建到该命名锚记的链接。
再看看“”的解释：
⽇本动漫《⽕影忍者》中时空术的⼀种，S级。利⽤标记完成空间穿梭。
都是做标记，然后快速定位。说不定AB(岸本齐史)也是个⽹页制作爱好者哦！
其实，关于锚点，我3年前就写过⼀篇针对性⽂章：“”，不过内容略浮躁，都是偏表象、偏基本应⽤层⾯的东西；这⾥还是关于锚点，探讨的内容可能更深层次⼀点。
其实web页⾯上还有⼀种定位，称为“focus定位”，也称“聚焦定位”，当页⾯上控件，例如⽂本框、单复选框、按钮等在『可响应聚焦状态①』下，通过类似label for或JS ele.focus()触发焦点选中状态的时候，也会发⽣定位②。这个以后有机会探讨，这⾥，专注锚点定位。
//zxx: ①⾮disabled状态，同时没有应⽤visibility:hidden以及display:none等CSS声明。其中，单纯应⽤pointer-events:none的控件元素是可以被focus的，pointer-events:none的作⽤更多类似完全穿透，⽽⾮不可⽤。
②我只在Chrome浏览器下做过完整测试，⾄于IE6这些奇葩，按照以往经验，也应如此。但IE6的尿性⼤家都尝过的，我不100%
保证，⼤家⾃备照妖镜。
⼆、web⽹页中锚点定位的触发
当下，锚点定位的应⽤⼀般有：
href="#"返回顶部；或者⽂章较长时候的标题索引，类似下⾯：
这类应⽤往往都是通过点击触发的，于是，难免的，我们可能就很简单地认为锚点定位的触发是通过点击事件。
⽽实际上，这种顺势⽽然的理解类似于古⼈理解为太阳绕着地球转⼀样，是有失偏颇的。
我个⼈认为，锚点的定位是通过浏览器URL地址的hash触发的。
hash?
CSSer们可能对hash这个名词不感冒，hash中⽂⼀般翻译为“哈希”，为⽅便记忆，你也可以读作“拉稀”。Hash是程序中⾮常重要以及常见的概念，可以实现内容的快速查，这⼀点跟锚点很类似。
JS中，并没有专门的hash的说法（虽然object⼲了类似的活）。但是，有⼀个地⽅，确是实打实、正⼉⼋经出现了hash！这就是location.hash.例如，某页⾯的URL是：
this.summer.io/is/#hot    // location.hash → #hot
则，location.hash值就是#hot.
这⾥#hot再URL地址中是有个专有名词的，叫什么来着？协议？主机？域名？路径？擦，显然都不对！罢了，⼤家就叫“哈希”吧；恩，似乎太⽣僻了，那叫“拉稀”吧；额，好像⼜难听了点，就叫“锚链”吧。
画性⼤发，画个抽象派的图吧。
上图很抽象地暴露了锚链和锚点的基友关系。也就是说，页⾯之所以能定位到锚点所在位置，都是因为URL地址中的锚链的作⽤，⽽不是点击⾏为。最好的证据就是，当重新载⼊带有锚链的页⾯时，锚点依然会被定位。
了解锚点定位的触发源有助于我们实际应⽤时候问题的规避等处理。
三、web锚点定位的机制
帷幕渐渐拉来，⾼潮慢慢到来。
作为页⾯制作开发⼈员，锚点定位⼀定都有⽤过④。然，就跟打飞机⼀样，⼤家都会打，也打得来；但是，可能就没想过这飞机运动的机制什么，我是不是从中发现什么，然后开个挂，秒了众多好友。我想，锚点定位可能也是如此。今天，我就说说我对锚点定位机制的理解。
//zxx: ④如果你睁⼤懵懂的双眼，楚楚可怜的看着我说，“主啊，我没⽤过锚点定位诶”；那么，我请你，去超市买包“炫迈⼝⾹糖”，⼀遍嚼炫迈⼝⾹糖，⼀边点击本页⾯右下⾓的返回顶部，直到没有味道，或者页⾯URL地址后⾯出现#为⽌。
1. 锚点定位他丫就是
锚点定位的机制就是！
不要邪恶，这⾥的就是，⽐⽅说下⾯的这位狗兄：
床单即页⾯中可滚动的元素，汪星⼈则是该元素内部的的锚点元素，锚点定位就是汪星⼈。噢啦！
OK，注意这⾥的两个重要条件：
❶. 元素可滚动；
❷. 锚点元素在内部；
换句话就是⽆滚动则⽆定位！此话务必牢记。
举个普通的板栗：
夏天很热，因为妹⼦们⾐服穿的少，如下HTML：
<img id="hot" src="image.zhangxinxu/image/study/s/s512/mm1.jpg">html如何设置图片滚动
于是，当含有#hot地址的时候，妹⼦图⽚就会顶着浏览器窗⼝上边缘显⽰了（如果滚动距离⾜够，⽐⽅说1920宽的显⽰器只能滚动⼀点）。
您可以狠狠地点击这⾥：
之所以美⼥图⽚会浏览器窗⼝顶端显⽰，是因为其⽗元素存在滚动条，可以滚动。
锚点定位的本质就是修改容器的滚动⾼度；如果⽗容器⽆滚动，则锚点定位就是失效的命，再举个有
滚动条但不滚动的例⼦。
您可以狠狠地点击这⾥：
美⼥图⽚的id是hot, 如下截图(img#hot…)：
URL锚链也是#hot, 但是，美⼥却没有被锚上去，⽽是，傻傻地看着你，看着你……
为何呢？下⾯源代码⽰意可能会告诉你答案：
body,
html {
height: 100%;
margin: 0;
overflow: hidden;
}
.container {
height: 100%;
overflow: auto;    /* 滚动条来⾃这⾥ */
}
本demo的滚动实际上是由container这个div产⽣的，⽽id为hot的这张图⽚在container之外，因此，锚点定位图⽚是⽆法上移的，因为图⽚⽗级⽊有可滚动的容器。
2. 双滚动条定位机制
我们还可能遇到这样的情况，即锚点元素有两个⽗容器有滚动条，⽐⽅说我博客后台页⾯，滚动条的表哥表都出现了：
不知有没有想过这个问题，这种情况下，元素锚点定位，是先改变爷爷的滚动⾼度呢还是爸爸的滚动⾼度呢？⼩。
⽬前，我还没想出100%证实的实验⽅法（因为⽗亲和爷爷的定位是⼀瞬间完成的，⽆法通过计算获知）
，不过，从理解上，个⼈认为计算是从⾥⾯发起的，原因有两个：
⾸先，如果先计算最外容器，可能就会存在⼀种⾥外⾥3次计算的情况。
//zxx: 下⾯的研究与探讨多半没有实际价值，实⽤主义派可以绕开⼲你的活去。
demo页⾯的情况，⽆论内外先计算，都是两次就完成，因为，最后定位的结果是，图⽚上边缘/内滚动容器上边缘/浏览器可视区域上边缘三者对齐。换成容易理解的解释：柯南，⽑利兰，⼩五郎在死⼈的时候会聚在⼀起（锚点定位对齐），假设嫌疑犯A让柯南和⽑利兰在⼀起（内滚动定位），嫌疑犯B可以让⽑利兰和⼩五郎在⼀起（外滚动定位）。则⽆论是嫌疑犯B先⾏动，还是嫌疑犯B先⾏动，最后都是三者在⼀起，都是2步完成。
但是，存在这样⼀种情况，锚点元素在滚动容器的负左上距离处或底部（即⽆法让元素滚动到顶部），如下截图：
此时，定位的最后结果不是图⽚上边缘/内滚动容器上边缘/浏览器可视区域上边缘三者对齐了。⽽是，图⽚上边缘，内部容器的半部分以及浏览器可视区域上边缘三者对齐。见下：
此时，如果外部先计算，则需要3步了——外部滚动条不知道内部滚动应当定位的情况，其只能让内部容器上边缘和浏览器对齐（或⼲等）；内部定位；外部发现位置不是⾃⼰所想，再次调整！
显然，这种情况，要先内部可以确定滚动位置的先偏移，然后在⽗级容器；
再者，我们滚轮⿏标触发滚动的时候，总是⾥⾯的先滚，滚不动了才滚外部滚动条；虽然有些牵强，但，隐隐中可以感受到那种由内⽽外的调调。
再啰嗦点废话，有⼈可能会疑问，这谁先计算压根就没有研究的意义吧，你研究这个的⽬的是什么呢？
这个问题乍听上去没什么问题？实际上，多少隐射出中国这个⼤环境浮躁与功利性的⼼态。
作为职业⼈，学习带有功利性其实也没什么不好；商业需要什么，什么学习有商业价值，我去学习之，没什么不好，⼤家都需要养家糊⼝的。但是，要是所有⼈都这个⼼态，怕不是什么好现象。
我之所以研究“内外滚动谁先计算”，真没什么⽬的，我就只是好奇，我就是希望得到⼀个正确的结论。私⼼肯定有，我希望⾃⼰在寻结论的过程中，获得⼀些意外的知识与结论，通过深⼊的思考，⾛在别⼈未曾⾛过的道路上；当然，也希望得到我想要的结论，⽽不关⼼是否有价值。即单纯的研究⼼态。
研究这个东西，本来就不应该为了某个⽬的⽽去做，否则就是功利性研究，这就是为何中国科研烂到⼀坨屎的原因之⼀。⽜顿哥哥被苹果砸，他就是好奇，为何苹果砸我，于是他去研究，你说他研究苹果为何往下掉有什么⽬的吗？难道要向苹果报仇？在中国，鲜有⼈会研究苹果为何往下掉，可能会有很多⼈会研究怎么让苹果长得像西施⼀样好看——有钱赚啊！
我觉得我们做技术研究，⼤可鄙弃“研究这个有什么价值”这个功利性的思考，喜欢什么，好奇什么，就去研究什么，价值？⽬的？等研究结束了，可能会有更深远的价值。
但话说回来，上头拿钱给你，肯定不是想让你搞些⽆⽤的研究的。所谓⼈在江湖漂，哪有不挨⼑。每⼈⼼中都有⾃⼰的⼀杆秤，该如何做还是⾃⼰决定。
3. overflow:hidden下的锚点定位
⾸先，⼤家要明确⼀点，overflow:hidden跟overflow:auto/scroll的差别就在于有没有那个滚动条。元素overflow:hidden了，⾥⾯内容⾼度溢出的时候，滚动依然存在，仅仅滚动条不存在！
下⾯这种GIF动画演⽰了锚点元素如何通过滚动⾼度的改变定位到滚动容器上边缘的；该动画适⽤于有滚动条以及没有滚动条的情况。
我这⾥多次强调overflow:hidden没有滚动条这种情况，不是因为今天周五⼼情好，⽽是因为⼀些⾼级应⽤以及奇怪问题出现（参见后⾯）都是在overflow:hidden条件下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。