2023年8月1日发(作者：)

URL锚点HTML定位技术机制⼀、锚点是什么锚点就等同于⽕影中的“飞雷神之术”，我们先看百科中的解释：使⽤命名锚记可以在⽂档中设置标记，这些标记通常放在⽂档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。⾸先，创建命名锚记，然后创建到该命名锚记的链接。再看看“”的解释：⽇本动漫《⽕影忍者》中时空术的⼀种，S级。利⽤标记完成空间穿梭。都是做标记，然后快速定位。说不定AB(岸本齐史)也是个⽹页制作爱好者哦！其实，关于锚点，我3年前就写过⼀篇针对性⽂章：“”，不过内容略浮躁，都是偏表象、偏基本应⽤层⾯的东西；这⾥还是关于锚点，探讨的内容可能更深层次⼀点。其实web页⾯上还有⼀种定位，称为“focus定位”，也称“聚焦定位”，当页⾯上控件，例如⽂本框、单复选框、按钮等在『可响应聚焦状态①』下，通过类似label

for或JS

()触发焦点选中状态的时候，也会发⽣定位②。这个以后有机会探讨，这⾥，专注锚点定位。//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！这就是.例如，某页⾯的URL是：/is/#hot // → #hot则，值就是#hot.这⾥#hot再URL地址中是有个专有名词的，叫什么来着？ 协议？主机？域名？路径？擦，显然都不对！罢了，⼤家就叫“哈希”吧；恩，似乎太⽣僻了，那叫“拉稀”吧；额，好像⼜难听了点，就叫“锚链”吧。画性⼤发，画个抽象派的图吧。上图很抽象地暴露了锚链和锚点的基友关系。也就是说，页⾯之所以能定位到锚点所在位置，都是因为URL地址中的锚链的作⽤，⽽不是点击⾏为。最好的证据就是，当重新载⼊带有锚链的页⾯时，锚点依然会被定位。了解锚点定位的触发源有助于我们实际应⽤时候问题的规避等处理。三、web锚点定位的机制帷幕渐渐拉来，⾼潮慢慢到来。作为页⾯制作开发⼈员，锚点定位⼀定都有⽤过④。然，就跟打飞机⼀样，⼤家都会打，也打得来；但是，可能就没想过这飞机运动的机制什么，我是不是从中发现什么，然后开个挂，秒了众多好友。我想，锚点定位可能也是如此。今天，我就说说我对锚点定位机制的理解。//zxx: ④ 如果你睁⼤懵懂的双眼，楚楚可怜的看着我说，“主啊，我没⽤过锚点定位诶”；那么，我请你，去超市买包“炫迈⼝⾹糖”，⼀遍嚼炫迈⼝⾹糖，⼀边点击本页⾯右下⾓的返回顶部，直到没有味道，或者页⾯URL地址后⾯出现#为⽌。1. 锚点定位他丫就是滚床单锚点定位的机制就是滚床单！不要邪恶，这⾥的滚床单就是滚床单，⽐⽅说下⾯的这位狗兄：床单即页⾯中可滚动的元素，汪星⼈则是该元素内部的的锚点元素，锚点定位就是汪星⼈滚床单。噢啦！OK，注意这⾥的两个重要条件：❶. 元素可滚动；❷. 锚点元素在内部；换句话就是⽆滚动则⽆定位！此话务必牢记。举个普通的板栗：夏天很热，因为妹⼦们⾐服穿的少，如下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条件下。正如上⾯反复提到，锚点定位本质就是滚传床单。因此，如果元素在滚动容器的左上⾓区域及其之外，显然滚不动，⾃然也没有锚点定位的效果！但是，如果元素在滚动容器的右下⽅及其之外，滚动条就是⽤来滚动右下溢出内容的，因此，这类元素可以被锚点定位。以上结论略含糊，后⾯的例⼦会让你清楚我在说什么的。四、锚点定位机制下的应⽤锚点定位机制的最经典应⽤就是“”。1234

如果您觉得此页⾯上看此效果有⼲扰（锚点跳来跳去，好讨厌哦），可以狠狠地点击这⾥：如果您理解上⾯那句“锚点定位本质就是滚动”的含义，则上⾯的效果就很好理解了。点击下⾯这个按钮，把上⾯容器从overflow:hidden改成overflow:auto，亲⾃滚滚床单，您就会知道怎么回事了（参考上⾯GIF的定位⽰意图）！翻滚吧，滚动条！overflow:hidden实际上是个障眼法，⾥⾯的选项卡列表们因为锚点定位⽽⼀个⼀个滚动到容器上边缘了，就形成了“选项卡切换”效果。上⾯的例⼦因为是垂直滚动，因此，容器定⾼了；我们还可以改成⽔平滚动，让列表们⽔平排列，也可以实现类似的效果。同样的，图⽚列表那种滑来滑去浏览的效果，我们也可以借助锚点；当然，使⽤锚点是为了让JS挂掉时候依然可⽤。实际，我们要组织锚点默认的⾏为的，因为——这种跳来跳去的效果不是平滑滴。//zxx: 据我亲⾃测试，Chrome实验性质的平滑滚动并不适⽤于锚点跳转五、:target伪类与锚点的配合在CSS2的时代，锚点的应⽤并不是很⼴泛，或者说不被看好与关注，很⼤⼀部分原因在于没有CSS这个好帮⼿辅助。CSS3中有个名外:target的伪类选择器，我跟你们讲，这可是个好东西。没有:target锚点就像30年前的甲鱼，送⼈都没⼈要；有个:target，锚点的应⽤开始⾛上⾹饽饽之路，潜⼒与价值⽴马彰显。如果不是还有半壁的IE6-IE8浏览器，我⼀定⼤⼒推崇:target伪类与锚点技术。好了，吹嘘的话语讲完了，到底是真是假，举个例⼦让⼤家明鉴下。我经常会去中国天⽓官⽹看4-7天天⽓预报（影响我的钓鱼计划），其中有个“查看未来4-7天天⽓”的按钮（见下图），其href地址是#, 交互式JS实现的，⽽且JS在底部加载，且该⽹站加载速度较慢。于是，差不多页⾯呈现的前半分钟，我点击这个按钮都是徒劳的，反⽽是出触发了#的返回顶部功能，更多天⽓不出来——⾮常糟糕的体验。其实，要提⾼体验很简单，JS我们保留，HTML和CSS稍作修改，档次⽴马不⼀样！⼩⼆，给我上盘demo过来~好嘞，客官，您可以狠狠地点击这⾥：点击demo中“查看4-7天天⽓”可以浏览展开与收起效果，如下gif动画截图演⽰：此效果完全HTML+CSS实现，JS酱油。此⽅法与“”并称新时代CSS显隐技术两⼤神器。:target伪类可以表⽰URL锚链对应的元素被锚中时候的状态。例如，点击“展开…”按钮后，锚链是"#7d"，则此时，就可以激活锚点元素:target选择器，例如：

.weatherYubao:target {} /* 我终于执⾏啦！ */:target伪类的显隐控制⽐单复选框要灵活很多，因为其可以不仅可以通过兄弟选择器控制样式，还可以使⽤⽗⼦选择器（如本demo），且推荐使⽤⽗⼦选择器可以做更多精确的控制（展开与收起的状态等）。.weatherYubao:target #weatherYubao2 { display: block;}.weatherYubao:target ...但是，不⾜也显⽽易见，触发定位，即页⾯的scroll滚动会改变⑤，略影响体验。但，这只是JS尚未载⼊完毕的交互体验增强之法，实际还是要借助JS组织默认⾏为的。因此此技术⼤可使⽤，因为是纯JS⽅法上的改进。//zxx: ⑤ 如果您有锚链改变，但页⾯不滚动的⽅法，欢迎分享:target伪类选择器IE9+, 以及其他现代浏览器⽀持。但，这并不影响该技术的使⽤，因为是纯JS⽅法上的改进。六、锚点定位机制产⽣的问题好的影视作品是要有波澜起伏的，到⽬前为⽌，展⽰的都是锚点定位的正⾯形象，现在，有必要曝光下锚点定位机制对交互实现造成的影响。根据上⾯的介绍，理论上，我们可以借助:target伪类以及CSS3

transition或者animation实现动画效果。⽐⽅说上⾯的查看4-7天⽓demo，我们再稍作调整~⼩⼆~懂的，客官，来了~客官，您可以狠狠地点击这⾥：为展⽰平滑效果，截了个视频：变化很简单，display:none/block显隐，改成height值控制的隐藏。#weatherYubao2 { height: 0px; overflow: hidden; transition: height .35s;}.weatherYubao:target #weatherYubao2 { height: 300px;}哟，不错哦。那有什么问题呢？我想实现上⾯1,2,3,4选项卡从下往上slide动画效果，可以不？按照我们常规实现slide向上相关的思路，应该是从translateY(100%)到translateY(0%)的变化，我们来试试~IE10+以及其他现代浏览器下，您可以狠狠地点击这⾥：但是，demo页⾯的效果很奇怪，点击那个选项卡，元素上去了，然后就不见了，咋回事？博主，是你这个demo做的有问题吧！？⾮也⾮也！还是上⾯那个demo，我们其他什么都不修改，就把从下往上进⼊的slide动画效果改成从上往下，也就是动画⽅向从↑改成↓。IE10+以及其他现代浏览器下，您可以狠狠地点击这⾥：您会发现：“哟，这⾥效果挺正常的嘛~~”。真的就translateY(100%)改成translateY(-100%)这⼀点点的差异（不信诸位可以右键源代码查看），那为何向上效果嗝屁；⽽向下效果却是好的呢？其实我上⾯已经给了答案了，上⾯曾说过下⾯这段话：如果元素在滚动容器的左上⾓区域及其之外，显然滚不动，⾃然也没有锚点定位的效果！但是，如果元素在滚动容器的右下⽅及其之外，滚动条就是⽤来滚动右下溢出内容的，因此，这类元素可以被锚点定位。slidedown效果是元素从容器的上⾯往下出现，在触发锚点定位的时候，这个元素是没有定位的。但是，slideup是从下⾯开始，在执⾏CSS的translateY(100%)的⼀瞬间，实际上⼀个等⾼的滚动条已经出现，锚点定位于是被触发，元素被上移⼀个⾝位；然后slideup动画触发，于是，元素跑到了容器之外，不可见了，这就是slideup

demo中元素莫名向上的原因。⽂字解释苍⽩，看下⾯的分解⽰意图：如何解决此问题？很简单，两个字：“延时”！slideup效果是从translateY(100%)到translateY(0%)，其效果不能准确呈现的终极原因就是translateY(100%)造成的滚动和锚点定位偏移滚动同⼀时间出现造成了冲突！避免这个问题很简单，我们只要让动画效果，尤其code>translateY(100%)的应⽤延时，CSS是可以搞定的。有必要来⼀发，您可以狠狠地点击这⾥：您会惊讶地发现，已经⼏乎完全真实的slideup效果，之前的选项内容向上隐藏，新点击的内容从下出现显⽰。于是，纯CSS实现带slide动画效果的选项卡完美呈现。相关CSS代码如下（省略私有前缀,

.05s表延迟时间）：@keyframes slideupin { 0% {transform: translateY(100%); } 100% { transform: translateY(0%);}}.list{ ... position:absolute; transform: translateY(-100%); transition: transform .35s .05s linear;}.list:target { z-index: 1; /* 最上⾯显⽰ */ transform: translateY(0%); animation: slideupin .35s .05s linear forwards;}七、未来⾼端流⾏技术之⼀：锚点技术其实，当下，锚点技术就可以在实际项⽬中⼤规模使⽤了，不过其⾝份是“CSS效果增强”，即更强的CSS action效果。我们依然保留JS在交互中的主导地位，但是同时完美融合CSS+HTML的锚点技术——JS只要return false或tDefault()组织了默认⾏为就不要担⼼CSS会抢占⾃⼰的王位。然，融合与兼顾必然会存在⼀些细节上的问题。这些问题即使我现在拿出来讲，其实也是秋风扫落叶，⽆⼈问津，时机很重要。我⼀向推荐看问题要⾯向未来。虽然说，最为锚点技术最核⼼的:target伪类⽬前IE6-IE8浏览器不⽀持，阻碍了其繁荣昌盛。但是，在不久的将来，或许就1~2年时间，新毕业的⼩朋友可能就觉得我们这些还拿IE8说事的叔叔阿姨们太凹凸曼了！举个简单例⼦。⽐⽅说微博这个产品，09年10年出来的，⽆论是新浪的，还是腾讯的。⽹页的效果、图形化东西等主要是通过图⽚增强的，⽽不是CSS增强；到了当下，视⽹膜等设备对⽹页有个更⾼的要求，图⽚增强的⽹页有种鲜花插⽜粪的感觉。于是，后⾯的结果是——专门做⼀个独⽴的针对移动设备的版本！其中要看清两点：其⼀，这些公司⼤，资源丰富，另开个新项⽬，尤其是⽹页这个短期项⽬，肥猪⾝上割块⾁，还是能跑能跳的。但是⼤多数公司中⼩企业，加上国家坑爹的政策，这些企业活得很⾟苦，资⾦很紧张。你说web项⽬还不容器上了⼀段时间，为了iPad浏览器效果，⼜专门搞个移动版本，其中的开发、推⼴等⼈⼒成本可想⽽知，钱就这样被烧掉了。但是，如果从⾯向未来的⾓度做产品，⽐⽅说技术这⼀块，以后所节约的成本可能会相当惊⼈。其⼆，这些公司⼤，但是做事相对不灵活。毕竟⽤户基数⼤，⼀个⽹站从图⽚增强改为CSS增强，这个担⼦谁都担不起。只能做新的版本。但是，中⼩企业不⼀样。这些公司产品为了⾯向未来⽽作⼀定的牺牲与舍弃是完全可以，⽽且应该如此。例如尝试响应式布局、或者⼤量应⽤⾯向未来的⼀些技术，⽐如本⽂展⽰的锚点技术，在此基础上做JS增强。于是，3年后，到了⼀个新的设备时代，这个⽹站尼玛俨然成为流⾏之先驱了。学习马云，⾼瞻远瞩，把握未来。⼋、结尾滚床单时间进⼊新环境，需要时间适应，例如新的时间规划安排等，技术的学习与博客更新会慢慢进⼊正常。擦，突然想起来，忘记探讨⼀个重要的问题了，为何href="#"点击后，触发的效果是回到页⾯顶部呢？对于这个问题，您怎么看呢？不妨我们⼀起探讨下（评论、邮件均可）~~最后再补充两个⼩tip：1.

F5刷新不会触发锚点定位，在Chrome浏览器下，这个过程由三部曲完成：⾸先，滚动⾼度为0；其次，锚点定位⾼度；最后，还原成刷新之前滚动条的滚动⾼度。您也可以⾃⼰F5试试，会看到滚动条明显的重定位。2. 连续按F5，或者说长按F5，则似乎等同于Ctrl+F5, Chrome浏览器以及IE浏览器都是如此。

2023年8月1日发(作者：)

URL锚点HTML定位技术机制⼀、锚点是什么锚点就等同于⽕影中的“飞雷神之术”，我们先看百科中的解释：使⽤命名锚记可以在⽂档中设置标记，这些标记通常放在⽂档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。创建到命名锚记的链接的过程分为两步。⾸先，创建命名锚记，然后创建到该命名锚记的链接。再看看“”的解释：⽇本动漫《⽕影忍者》中时空术的⼀种，S级。利⽤标记完成空间穿梭。都是做标记，然后快速定位。说不定AB(岸本齐史)也是个⽹页制作爱好者哦！其实，关于锚点，我3年前就写过⼀篇针对性⽂章：“”，不过内容略浮躁，都是偏表象、偏基本应⽤层⾯的东西；这⾥还是关于锚点，探讨的内容可能更深层次⼀点。其实web页⾯上还有⼀种定位，称为“focus定位”，也称“聚焦定位”，当页⾯上控件，例如⽂本框、单复选框、按钮等在『可响应聚焦状态①』下，通过类似label

for或JS

()触发焦点选中状态的时候，也会发⽣定位②。这个以后有机会探讨，这⾥，专注锚点定位。//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！这就是.例如，某页⾯的URL是：/is/#hot // → #hot则，值就是#hot.这⾥#hot再URL地址中是有个专有名词的，叫什么来着？ 协议？主机？域名？路径？擦，显然都不对！罢了，⼤家就叫“哈希”吧；恩，似乎太⽣僻了，那叫“拉稀”吧；额，好像⼜难听了点，就叫“锚链”吧。画性⼤发，画个抽象派的图吧。上图很抽象地暴露了锚链和锚点的基友关系。也就是说，页⾯之所以能定位到锚点所在位置，都是因为URL地址中的锚链的作⽤，⽽不是点击⾏为。最好的证据就是，当重新载⼊带有锚链的页⾯时，锚点依然会被定位。了解锚点定位的触发源有助于我们实际应⽤时候问题的规避等处理。三、web锚点定位的机制帷幕渐渐拉来，⾼潮慢慢到来。作为页⾯制作开发⼈员，锚点定位⼀定都有⽤过④。然，就跟打飞机⼀样，⼤家都会打，也打得来；但是，可能就没想过这飞机运动的机制什么，我是不是从中发现什么，然后开个挂，秒了众多好友。我想，锚点定位可能也是如此。今天，我就说说我对锚点定位机制的理解。//zxx: ④ 如果你睁⼤懵懂的双眼，楚楚可怜的看着我说，“主啊，我没⽤过锚点定位诶”；那么，我请你，去超市买包“炫迈⼝⾹糖”，⼀遍嚼炫迈⼝⾹糖，⼀边点击本页⾯右下⾓的返回顶部，直到没有味道，或者页⾯URL地址后⾯出现#为⽌。1. 锚点定位他丫就是滚床单锚点定位的机制就是滚床单！不要邪恶，这⾥的滚床单就是滚床单，⽐⽅说下⾯的这位狗兄：床单即页⾯中可滚动的元素，汪星⼈则是该元素内部的的锚点元素，锚点定位就是汪星⼈滚床单。噢啦！OK，注意这⾥的两个重要条件：❶. 元素可滚动；❷. 锚点元素在内部；换句话就是⽆滚动则⽆定位！此话务必牢记。举个普通的板栗：夏天很热，因为妹⼦们⾐服穿的少，如下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条件下。正如上⾯反复提到，锚点定位本质就是滚传床单。因此，如果元素在滚动容器的左上⾓区域及其之外，显然滚不动，⾃然也没有锚点定位的效果！但是，如果元素在滚动容器的右下⽅及其之外，滚动条就是⽤来滚动右下溢出内容的，因此，这类元素可以被锚点定位。以上结论略含糊，后⾯的例⼦会让你清楚我在说什么的。四、锚点定位机制下的应⽤锚点定位机制的最经典应⽤就是“”。1234

如果您觉得此页⾯上看此效果有⼲扰（锚点跳来跳去，好讨厌哦），可以狠狠地点击这⾥：如果您理解上⾯那句“锚点定位本质就是滚动”的含义，则上⾯的效果就很好理解了。点击下⾯这个按钮，把上⾯容器从overflow:hidden改成overflow:auto，亲⾃滚滚床单，您就会知道怎么回事了（参考上⾯GIF的定位⽰意图）！翻滚吧，滚动条！overflow:hidden实际上是个障眼法，⾥⾯的选项卡列表们因为锚点定位⽽⼀个⼀个滚动到容器上边缘了，就形成了“选项卡切换”效果。上⾯的例⼦因为是垂直滚动，因此，容器定⾼了；我们还可以改成⽔平滚动，让列表们⽔平排列，也可以实现类似的效果。同样的，图⽚列表那种滑来滑去浏览的效果，我们也可以借助锚点；当然，使⽤锚点是为了让JS挂掉时候依然可⽤。实际，我们要组织锚点默认的⾏为的，因为——这种跳来跳去的效果不是平滑滴。//zxx: 据我亲⾃测试，Chrome实验性质的平滑滚动并不适⽤于锚点跳转五、:target伪类与锚点的配合在CSS2的时代，锚点的应⽤并不是很⼴泛，或者说不被看好与关注，很⼤⼀部分原因在于没有CSS这个好帮⼿辅助。CSS3中有个名外:target的伪类选择器，我跟你们讲，这可是个好东西。没有:target锚点就像30年前的甲鱼，送⼈都没⼈要；有个:target，锚点的应⽤开始⾛上⾹饽饽之路，潜⼒与价值⽴马彰显。如果不是还有半壁的IE6-IE8浏览器，我⼀定⼤⼒推崇:target伪类与锚点技术。好了，吹嘘的话语讲完了，到底是真是假，举个例⼦让⼤家明鉴下。我经常会去中国天⽓官⽹看4-7天天⽓预报（影响我的钓鱼计划），其中有个“查看未来4-7天天⽓”的按钮（见下图），其href地址是#, 交互式JS实现的，⽽且JS在底部加载，且该⽹站加载速度较慢。于是，差不多页⾯呈现的前半分钟，我点击这个按钮都是徒劳的，反⽽是出触发了#的返回顶部功能，更多天⽓不出来——⾮常糟糕的体验。其实，要提⾼体验很简单，JS我们保留，HTML和CSS稍作修改，档次⽴马不⼀样！⼩⼆，给我上盘demo过来~好嘞，客官，您可以狠狠地点击这⾥：点击demo中“查看4-7天天⽓”可以浏览展开与收起效果，如下gif动画截图演⽰：此效果完全HTML+CSS实现，JS酱油。此⽅法与“”并称新时代CSS显隐技术两⼤神器。:target伪类可以表⽰URL锚链对应的元素被锚中时候的状态。例如，点击“展开…”按钮后，锚链是"#7d"，则此时，就可以激活锚点元素:target选择器，例如：

.weatherYubao:target {} /* 我终于执⾏啦！ */:target伪类的显隐控制⽐单复选框要灵活很多，因为其可以不仅可以通过兄弟选择器控制样式，还可以使⽤⽗⼦选择器（如本demo），且推荐使⽤⽗⼦选择器可以做更多精确的控制（展开与收起的状态等）。.weatherYubao:target #weatherYubao2 { display: block;}.weatherYubao:target ...但是，不⾜也显⽽易见，触发定位，即页⾯的scroll滚动会改变⑤，略影响体验。但，这只是JS尚未载⼊完毕的交互体验增强之法，实际还是要借助JS组织默认⾏为的。因此此技术⼤可使⽤，因为是纯JS⽅法上的改进。//zxx: ⑤ 如果您有锚链改变，但页⾯不滚动的⽅法，欢迎分享:target伪类选择器IE9+, 以及其他现代浏览器⽀持。但，这并不影响该技术的使⽤，因为是纯JS⽅法上的改进。六、锚点定位机制产⽣的问题好的影视作品是要有波澜起伏的，到⽬前为⽌，展⽰的都是锚点定位的正⾯形象，现在，有必要曝光下锚点定位机制对交互实现造成的影响。根据上⾯的介绍，理论上，我们可以借助:target伪类以及CSS3

transition或者animation实现动画效果。⽐⽅说上⾯的查看4-7天⽓demo，我们再稍作调整~⼩⼆~懂的，客官，来了~客官，您可以狠狠地点击这⾥：为展⽰平滑效果，截了个视频：变化很简单，display:none/block显隐，改成height值控制的隐藏。#weatherYubao2 { height: 0px; overflow: hidden; transition: height .35s;}.weatherYubao:target #weatherYubao2 { height: 300px;}哟，不错哦。那有什么问题呢？我想实现上⾯1,2,3,4选项卡从下往上slide动画效果，可以不？按照我们常规实现slide向上相关的思路，应该是从translateY(100%)到translateY(0%)的变化，我们来试试~IE10+以及其他现代浏览器下，您可以狠狠地点击这⾥：但是，demo页⾯的效果很奇怪，点击那个选项卡，元素上去了，然后就不见了，咋回事？博主，是你这个demo做的有问题吧！？⾮也⾮也！还是上⾯那个demo，我们其他什么都不修改，就把从下往上进⼊的slide动画效果改成从上往下，也就是动画⽅向从↑改成↓。IE10+以及其他现代浏览器下，您可以狠狠地点击这⾥：您会发现：“哟，这⾥效果挺正常的嘛~~”。真的就translateY(100%)改成translateY(-100%)这⼀点点的差异（不信诸位可以右键源代码查看），那为何向上效果嗝屁；⽽向下效果却是好的呢？其实我上⾯已经给了答案了，上⾯曾说过下⾯这段话：如果元素在滚动容器的左上⾓区域及其之外，显然滚不动，⾃然也没有锚点定位的效果！但是，如果元素在滚动容器的右下⽅及其之外，滚动条就是⽤来滚动右下溢出内容的，因此，这类元素可以被锚点定位。slidedown效果是元素从容器的上⾯往下出现，在触发锚点定位的时候，这个元素是没有定位的。但是，slideup是从下⾯开始，在执⾏CSS的translateY(100%)的⼀瞬间，实际上⼀个等⾼的滚动条已经出现，锚点定位于是被触发，元素被上移⼀个⾝位；然后slideup动画触发，于是，元素跑到了容器之外，不可见了，这就是slideup

demo中元素莫名向上的原因。⽂字解释苍⽩，看下⾯的分解⽰意图：如何解决此问题？很简单，两个字：“延时”！slideup效果是从translateY(100%)到translateY(0%)，其效果不能准确呈现的终极原因就是translateY(100%)造成的滚动和锚点定位偏移滚动同⼀时间出现造成了冲突！避免这个问题很简单，我们只要让动画效果，尤其code>translateY(100%)的应⽤延时，CSS是可以搞定的。有必要来⼀发，您可以狠狠地点击这⾥：您会惊讶地发现，已经⼏乎完全真实的slideup效果，之前的选项内容向上隐藏，新点击的内容从下出现显⽰。于是，纯CSS实现带slide动画效果的选项卡完美呈现。相关CSS代码如下（省略私有前缀,

.05s表延迟时间）：@keyframes slideupin { 0% {transform: translateY(100%); } 100% { transform: translateY(0%);}}.list{ ... position:absolute; transform: translateY(-100%); transition: transform .35s .05s linear;}.list:target { z-index: 1; /* 最上⾯显⽰ */ transform: translateY(0%); animation: slideupin .35s .05s linear forwards;}七、未来⾼端流⾏技术之⼀：锚点技术其实，当下，锚点技术就可以在实际项⽬中⼤规模使⽤了，不过其⾝份是“CSS效果增强”，即更强的CSS action效果。我们依然保留JS在交互中的主导地位，但是同时完美融合CSS+HTML的锚点技术——JS只要return false或tDefault()组织了默认⾏为就不要担⼼CSS会抢占⾃⼰的王位。然，融合与兼顾必然会存在⼀些细节上的问题。这些问题即使我现在拿出来讲，其实也是秋风扫落叶，⽆⼈问津，时机很重要。我⼀向推荐看问题要⾯向未来。虽然说，最为锚点技术最核⼼的:target伪类⽬前IE6-IE8浏览器不⽀持，阻碍了其繁荣昌盛。但是，在不久的将来，或许就1~2年时间，新毕业的⼩朋友可能就觉得我们这些还拿IE8说事的叔叔阿姨们太凹凸曼了！举个简单例⼦。⽐⽅说微博这个产品，09年10年出来的，⽆论是新浪的，还是腾讯的。⽹页的效果、图形化东西等主要是通过图⽚增强的，⽽不是CSS增强；到了当下，视⽹膜等设备对⽹页有个更⾼的要求，图⽚增强的⽹页有种鲜花插⽜粪的感觉。于是，后⾯的结果是——专门做⼀个独⽴的针对移动设备的版本！其中要看清两点：其⼀，这些公司⼤，资源丰富，另开个新项⽬，尤其是⽹页这个短期项⽬，肥猪⾝上割块⾁，还是能跑能跳的。但是⼤多数公司中⼩企业，加上国家坑爹的政策，这些企业活得很⾟苦，资⾦很紧张。你说web项⽬还不容器上了⼀段时间，为了iPad浏览器效果，⼜专门搞个移动版本，其中的开发、推⼴等⼈⼒成本可想⽽知，钱就这样被烧掉了。但是，如果从⾯向未来的⾓度做产品，⽐⽅说技术这⼀块，以后所节约的成本可能会相当惊⼈。其⼆，这些公司⼤，但是做事相对不灵活。毕竟⽤户基数⼤，⼀个⽹站从图⽚增强改为CSS增强，这个担⼦谁都担不起。只能做新的版本。但是，中⼩企业不⼀样。这些公司产品为了⾯向未来⽽作⼀定的牺牲与舍弃是完全可以，⽽且应该如此。例如尝试响应式布局、或者⼤量应⽤⾯向未来的⼀些技术，⽐如本⽂展⽰的锚点技术，在此基础上做JS增强。于是，3年后，到了⼀个新的设备时代，这个⽹站尼玛俨然成为流⾏之先驱了。学习马云，⾼瞻远瞩，把握未来。⼋、结尾滚床单时间进⼊新环境，需要时间适应，例如新的时间规划安排等，技术的学习与博客更新会慢慢进⼊正常。擦，突然想起来，忘记探讨⼀个重要的问题了，为何href="#"点击后，触发的效果是回到页⾯顶部呢？对于这个问题，您怎么看呢？不妨我们⼀起探讨下（评论、邮件均可）~~最后再补充两个⼩tip：1.

F5刷新不会触发锚点定位，在Chrome浏览器下，这个过程由三部曲完成：⾸先，滚动⾼度为0；其次，锚点定位⾼度；最后，还原成刷新之前滚动条的滚动⾼度。您也可以⾃⼰F5试试，会看到滚动条明显的重定位。2. 连续按F5，或者说长按F5，则似乎等同于Ctrl+F5, Chrome浏览器以及IE浏览器都是如此。