一、锚点是什么锚点就等同于火影中的“飞雷神之术”，我们先看百科中锚点的解释：
再看看“飞雷神之术”的解释：
都是做标记，然后快速定位。说不定AB(岸本齐史)也是个网页制作爱好者哦！ 其实，关于锚点，我3年前就写过一篇针对性文章：“关于锚点跳转及jQuery下相关操作与插件”，不过内容略浮躁，都是偏表象、偏基本应用层面的东西；这里还是关于锚点，探讨的内容可能更深层次一点。 其实web页面上还有一种定位，称为“focus定位”，也称“聚焦定位”，当页面上控件，例如文本框、单复选框、按钮等在『可响应聚焦状态①』下，通过类似
二、web网页中锚点定位的触发当下，锚点定位的应用一般有： 这类应用往往都是通过点击触发的，于是，难免的，我们可能就很简单地认为锚点定位的触发是通过点击事件。 而实际上，这种顺势而然的理解类似于古人理解为太阳绕着地球转一样，是有失偏颇的。 我个人认为，锚点的定位是通过浏览器URL地址的
CSSer们可能对 JS中，并没有专门的 例如，某页面的URL是： http://this./is/#hot // location.hash → #hot则， 这里 画性大发，画个抽象派的图吧。
上图很抽象地暴露了锚链和锚点的基友关系。也就是说，页面之所以能定位到锚点所在位置，都是因为URL地址中的锚链的作用，而不是点击行为。最好的证据就是，当重新载入带有锚链的页面时，锚点依然会被定位。 了解锚点定位的触发源有助于我们实际应用时候问题的规避等处理。 三、web锚点定位的机制帷幕渐渐拉来，高潮慢慢到来。 作为页面制作开发人员，锚点定位一定都有用过④。然，就跟打飞机一样，大家都会打，也打得来；但是，可能就没想过这飞机运动的机制什么，我是不是从中发现什么，然后开个挂，秒了众多好友。我想，锚点定位可能也是如此。今天，我就说说我对锚点定位机制的理解。 //zxx: ④ 如果你睁大懵懂的双眼，楚楚可怜的看着我说，“主啊，我没用过锚点定位诶”；那么，我请你，去超市买包“炫迈口香糖”，一遍嚼炫迈口香糖，一边点击本页面右下角的返回顶部，直到没有味道，或者页面URL地址后面出现 1. 锚点定位他丫就是滚床单 不要邪恶，这里的滚床单就是滚床单，比方说下面的这位狗兄： 床单即页面中可滚动的元素，汪星人则是该元素内部的的锚点元素，锚点定位就是汪星人滚床单。噢啦！ OK，注意这里的两个重要条件： 换句话就是无滚动则无定位！此话务必牢记。 举个普通的板栗： 夏天很热，因为妹子们衣服穿的少，如下HTML： <img id="hot" src="http://image./image/study/s/s512/mm1.jpg"> 于是，当含有 您可以狠狠地点击这里：夏天很热，因为妹子穿的少demo
之所以美女图片会浏览器窗口顶端显示，是因为其父元素存在滚动条，可以滚动。 锚点定位的本质就是修改容器的滚动高度；如果父容器无滚动，则锚点定位就是失效的命，再举个有滚动条但不滚动的例子。 您可以狠狠地点击这里：父容器无滚动锚点定位失效demo 美女图片的 URL锚链也是 为何呢？下面源代码示意可能会告诉你答案： body,
html {
height: 100%;
margin: 0;
overflow: hidden;
}
.container {
height: 100%;
overflow: auto; /* 滚动条来自这里 */
}
本demo的滚动实际上是由 2. 双滚动条定位机制 不知有没有想过这个问题，这种情况下，元素锚点定位，是先改变爷爷的滚动高度呢还是爸爸的滚动高度呢？小demo可参见这里。 目前，我还没想出100%证实的实验方法（因为父亲和爷爷的定位是一瞬间完成的，无法通过计算获知），不过，从理解上，个人认为计算是从里面发起的，原因有两个： //zxx: 下面的研究与探讨多半没有实际价值，实用主义派可以绕开干你的活去。 demo页面的情况，无论内外先计算，都是两次就完成，因为，最后定位的结果是，图片上边缘/内滚动容器上边缘/浏览器可视区域上边缘三者对齐。换成容易理解的解释：柯南，毛利兰，小五郎在死人的时候会聚在一起（锚点定位对齐），假设嫌疑犯A让柯南和毛利兰在一起（内滚动定位），嫌疑犯B可以让毛利兰和小五郎在一起（外滚动定位）。则无论是嫌疑犯B先行动，还是嫌疑犯B先行动，最后都是三者在一起，都是2步完成。 但是，存在这样一种情况，锚点元素在滚动容器的负左上距离处或底部（即无法让元素滚动到顶部），如下截图： 此时，定位的最后结果不是图片上边缘/内滚动容器上边缘/浏览器可视区域上边缘三者对齐了。而是，图片上边缘，内部容器的半部分以及浏览器可视区域上边缘三者对齐。见下： 此时，如果外部先计算，则需要3步了——外部滚动条不知道内部滚动应当定位的情况，其只能让内部容器上边缘和浏览器对齐（或干等）；内部定位；外部发现位置不是自己所想，再次调整！ 显然，这种情况，要先内部可以确定滚动位置的先偏移，然后在父级容器； 再者，我们滚轮鼠标触发滚动的时候，总是里面的先滚，滚不动了才滚外部滚动条；虽然有些牵强，但，隐隐中可以感受到那种由内而外的调调。 再啰嗦点废话，有人可能会疑问，这谁先计算压根就没有研究的意义吧，你研究这个的目的是什么呢？ 这个问题乍听上去没什么问题？实际上，多少隐射出中国这个大环境浮躁与功利性的心态。 作为职业人，学习带有功利性其实也没什么不好；商业需要什么，什么学习有商业价值，我去学习之，没什么不好，大家都需要养家糊口的。但是，要是所有人都这个心态，怕不是什么好现象。 我之所以研究“内外滚动谁先计算”，真没什么目的，我就只是好奇，我就是希望得到一个正确的结论。私心肯定有，我希望自己在寻找结论的过程中，获得一些意外的知识与结论，通过深入的思考，走在别人未曾走过的道路上；当然，也希望得到我想要的结论，而不关心是否有价值。即单纯的研究心态。 研究这个东西，本来就不应该为了某个目的而去做，否则就是功利性研究，这就是为何中国科研烂到一坨屎的原因之一。牛顿哥哥被苹果砸，他就是好奇，为何苹果砸我，于是他去研究，你说他研究苹果为何往下掉有什么目的吗？难道要向苹果报仇？在中国，鲜有人会研究苹果为何往下掉，可能会有很多人会研究怎么让苹果长得像西施一样好看——有钱赚啊！ 我觉得我们做技术研究，大可鄙弃“研究这个有什么价值”这个功利性的思考，喜欢什么，好奇什么，就去研究什么，价值？目的？等研究结束了，可能会有更深远的价值。 但话说回来，上头拿钱给你，肯定不是想让你搞些无用的研究的。所谓人在江湖漂，哪有不挨刀。每人心中都有自己的一杆秤，该如何做还是自己决定。 3. overflow:hidden下的锚点定位 下面这种GIF动画演示了锚点元素如何通过滚动高度的改变定位到滚动容器上边缘的；该动画适用于有滚动条以及没有滚动条的情况。 我这里多次强调 正如上面反复提到，锚点定位本质就是滚传床单。因此，如果元素在滚动容器的左上角区域及其之外，显然滚不动，自然也没有锚点定位的效果！但是，如果元素在滚动容器的右下方及其之外，滚动条就是用来滚动右下溢出内容的，因此，这类元素可以被锚点定位。 以上结论略含糊，后面的例子会让你清楚我在说什么的。 四、锚点定位机制下的应用锚点定位机制的最经典应用就是“无JavaScript实现选项卡轮转切换效果”。 1 2 3 4 如果您觉得此页面上看此效果有干扰（锚点跳来跳去，好讨厌哦），可以狠狠地点击这里：无JavaScript实现的切换效果demo 如果您理解上面那句“锚点定位本质就是滚动”的含义，则上面的效果就很好理解了。 点击下面这个按钮，把上面容器从
上面的例子因为是垂直滚动，因此，容器定高了；我们还可以改成水平滚动，让列表们水平排列，也可以实现类似的效果。 同样的，图片列表那种滑来滑去浏览的效果，我们也可以借助锚点；当然，使用锚点是为了让JS挂掉时候依然可用。实际，我们要组织锚点默认的行为的，因为——这种跳来跳去的效果不是平滑滴。//zxx: 据我亲自测试，Chrome实验性质的平滑滚动并不适用于锚点跳转 五、:target伪类与锚点的配合在CSS2的时代，锚点的应用并不是很广泛，或者说不被看好与关注，很大一部分原因在于没有CSS这个好帮手辅助。CSS3中有个名外 好了，吹嘘的话语讲完了，到底是真是假，举个例子让大家明鉴下。我经常会去中国天气官网看4-7天天气预报（影响我的钓鱼计划），其中有个“查看未来4-7天天气”的按钮（见下图），其 其实，要提高体验很简单，JS我们保留，HTML和CSS稍作修改，档次立马不一样！ 小二，给我上盘demo过来~ 好嘞，客官，您可以狠狠地点击这里：:target与锚点元素显示隐藏效果demo 点击demo中“查看4-7天天气”可以浏览展开与收起效果，如下gif动画截图演示： 此效果完全HTML+CSS实现，JS酱油。此方法与“复选框显示隐藏控制法”并称新时代CSS显隐技术两大神器。
<div id="7d" class="weatherYubao"></div> .weatherYubao:target {} /* 我终于执行啦！ */
.weatherYubao:target #weatherYubao2 {
display: block;
}
.weatherYubao:target ...但是，不足也显而易见，触发定位，即页面的scroll滚动会改变⑤，略影响体验。但，这只是JS尚未载入完毕的交互体验增强之法，实际还是要借助JS组织默认行为的。因此此技术大可使用，因为是纯JS方法上的改进。 //zxx: ⑤ 如果您有锚链改变，但页面不滚动的方法，欢迎分享
六、锚点定位机制产生的问题好的影视作品是要有波澜起伏的，到目前为止，展示的都是锚点定位的正面形象，现在，有必要曝光下锚点定位机制对交互实现造成的影响。 根据上面的介绍，理论上，我们可以借助 比方说上面的查看4-7天气demo，我们再稍作调整~ 小二~ 客官，您可以狠狠地点击这里：:target伪类与锚点元素的动画显隐demo 为展示平滑效果，截了个视频： 变化很简单， #weatherYubao2 {
height: 0px;
overflow: hidden;
transition: height .35s;
}
.weatherYubao:target #weatherYubao2 {
height: 300px;
}哟，不错哦。那有什么问题呢？ 我想实现上面 按照我们常规实现slide向上相关的思路，应该是从 IE10+以及其他现代浏览器下，您可以狠狠地点击这里：常规slideup思路下demo 但是，demo页面的效果很奇怪，点击那个选项卡，元素上去了，然后就不见了，咋回事？ 博主，是你这个demo做的有问题吧！？ 非也非也！还是上面那个demo，我们其他什么都不修改，就把从下往上进入的slide动画效果改成从上往下，也就是动画方向从 IE10+以及其他现代浏览器下，您可以狠狠地点击这里：常规slidedown思路下demo 您会发现：“哟，这里效果挺正常的嘛~~”。
真的就 其实我上面已经给了答案了，上面曾说过下面这段话：
文字解释苍白，看下面的分解示意图： 如何解决此问题？
避免这个问题很简单，我们只要让动画效果，尤其code>translateY(100%)的应用延时，CSS是可以搞定的。 有必要来一发，您可以狠狠地点击这里：延时解决slideup和锚点定位冲突demo 您会惊讶地发现，已经几乎完全真实的slideup效果，之前的选项内容向上隐藏，新点击的内容从下出现显示。 于是，纯CSS实现带slide动画效果的选项卡完美呈现。相关CSS代码如下（省略私有前缀, @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只要 然，融合与兼顾必然会存在一些细节上的问题。这些问题即使我现在拿出来讲，其实也是秋风扫落叶，无人问津，时机很重要。 我一向推荐看问题要面向未来。虽然说，最为锚点技术最核心的
举个简单例子。比方说微博这个产品，09年10年出来的，无论是新浪的，还是腾讯的。网页的效果、图形化东西等主要是通过图片增强的，而不是CSS增强；到了当下，视网膜等设备对网页有个更高的要求，图片增强的网页有种鲜花插牛粪的感觉。于是，后面的结果是——专门做一个独立的针对移动设备的版本！ 其中要看清两点： 学习马云，高瞻远瞩，把握未来。 八、结尾滚床单时间进入新环境，需要时间适应，例如新的时间规划安排等，技术的学习与博客更新会慢慢进入正常。擦，突然想起来，忘记探讨一个重要的问题了，为何 最后再补充两个小tip： 好久没写东西了，所以可能话痨了点，能静心读到这里的朋友们我双手合一，表示诚挚的感谢！另外，文中有些观点结论都是自己感性认识，可能存在不准确之处，欢迎大力指正。 希望本文的内容能够对您的学习有所帮助。 哦，快12点了，滚床单时间到了…… （本篇完） |
|
|
