关于锚点

最新推荐文章于 2022-01-24 21:07:22 发布

iteye_3607

最新推荐文章于 2022-01-24 21:07:22 发布

阅读量190

点赞数

转自：http://varnow.org/?p=38

关于A标签的页内锚点，记录一下：
1. 目标元素的ID和Name都可以作为锚点，区别在于ID对于目标元素的类型是无限制的，而name则仅适用于以下元素：A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP.

 
   view plain 
   copy to clipboard 
   print 
   ? 
  
 <ahref="#target1">Gotarget1</a>//使用name 
 <ahref="#target2">Gotarget2</a>//使用id 
 <ahref="#target3">Gotarget3</a>//div的name是无效的 
 <ahref="#target4">Gotarget4</a>//div的id是OK的 
 .... 
 contents 
 .... 
 <aname="target1">Target1here</a> 
 <aid="target2">Target2here</a> 
 <divname="target3">Target3here</div> 
 <divid="target4">Target4here</div> 

2. 大小写敏感
html本身是不区分大小写的,但是对于锚点则区别对待了。经测试在IE下不区分大小写，但是在Firefox、Chrome下均区分大小写。

 
   view plain 
   copy to clipboard 
   print 
   ? 
  
 <ahref="#target1">Gotarget1</a>//这里的锚点使用了小写，在IE下OK，在Firefox、Chrome下失效 
 .... 
 contents 
 .... 
 <aname="TARGET1">Target1here</a>//这是是大写 

3. 不管用name还是id做锚点都应该保持其唯一性，虽然经测试重复的name和id都会定位到第一个，但是应该杜绝这样的做法，可能会产生无法预料的问题。
4. 带锚点刷新
当URL中带锚点进行刷新时，不同的浏览器也有不同的表现。
ie/chrome/safari 很简单，只记住滚动条的位置，即恢复到刷新前滚动条所在的位置。
firefox 这个处理的比较有特点，当滚动条处于最顶部时页面会定位到锚点处，除此之外均会定位到刷新前滚动条的位置。
5. 当锚点值只带“#”时，会定位到页首，很多“回到顶部”锚点的做法就是这么用的（好处是可以省个标签），但是未找到官方关于这一用法的支持，为避免意外最好还是找个标签靠一下。