(转)前端页面，页内锚定位分析

原文链接：http://blog.sina.com.cn/s/blog_4714e4780100im2y.html

很多文章中都有介绍如果大篇幅页面，慢慢去找很费劲，而页内直接定位到相应的内容处，则十分方便。但是很多文章只提到了 name属性，而且name属性还有很多限制与不完善。下面使用两个例子来举例说明：
例1，

<a href="#first">定位到first相关处</a>
<a href="#second">定位到second相关处</a>
<a href="#third">定位到second相关处</a>

…………
…………

<a name="first">first相关内容……</a>
<a name="second">second相关内容</a>
<a name="third">third相关内容</a>

…………

如果你试过了，会发现上面代码可以正确跳转，下面看例2
例2，

<a href="#first">定位到first相关处</a>
<a href="#second">定位到second相关处</a>
<a href="#third">定位到second相关处</a>
<a href="#forth">定位到second相关处</a>
<a href="#five">定位到second相关处</a>

…………
…………

<div name="first">first相关内容……</div>
<span name="second">second相关内容</span>
<div id="third">third相关内容</div>
<span id="forth">second相关内容</span>
<a id="five">second相关内容</a>

…………

你应该发现，只有以 id 作为其属性来定位的可以正确跳转。
总结：所以说，name属性作为跳转锚定位局限于<a>元素，即形如 <a…name=""…></a>。而id作为其属性来使用，可以适应更多的页面布局元素。而这是很多书中没有提到的。