html中设置锚点链接的注意事项

html中设置锚点链接的注意事项，方法有如下几种：

1、使用id定位：

<html> 
<head> 
<title>锚点实例</title>
<base target="_self" />
</head> 
<body> 
<div id="habotalk"><a href="http://keleyi.com/a/bjac/hwqa4oex.htm">HTML5锚点</a>
<script type="text/javascript" src="http://keleyi.com/kineryi/js/gggg728x90a.js"></script></div> 
<div style="height:30px;width:100%;text-align:center"><a href="#habotalkfoo" target="_self">转到vc底部</a></div> 
<div style="background-color:#959822; width:100%;height:150px;">请滚动鼠标使页面向下</div> 
<div style="background-color:Green; width:100%;height:150px;">www.habotalk.com</div> 
<div style="background-color:Red; width:100%;height:150px;">欢迎</div> 
<div style="background-color:Yellow; width:100%;height:150px;">hi</div> 
<div style="background-color:Silver; width:100%;height:150px;">
<a href="http://www.habotalk.com" target="_blank">绿色箭头图片返回顶部效果</a> 
<a href="http://www.habotalk.com" target="_blank">蓝色方块返回顶部</a> 
<a href="http://www.habotalk.com" target="_blank">纯文本返回顶部</a> 
<a href="http://www.habotalk.com" target="_blank">漂亮的返回顶部、底部和留言</a></div> 
<div style="background-color:Aqua; width:100%;height:150px;">锚点链接qwert24t</div> 
<div style="background-color:Fuchsia; width:100%;height:150px;">锚点链接5423y</div> 
<div style="background-color:Green; width:100%;height:150px;">锚点链接23454</div> 
<div style="background-color:Blue; width:100%;height:150px;">哈勃私语</div> 
<div style="background-color:Olive; width:100%;height:150px;">哈勃私语 监视下滚像素</div> 
<div style="background-color:Purple; width:100%;height:150px;">jargvqudfgvaefbedfgbvrfgbvy</div>
<div style="background-color:Green; width:100%;height:150px;">dghrjn</div> 
<div style="background-color:Lime; width:100%;height:150px;">sdgfkghjn</div> 
<div style="background-color:Orange; width:100%;height:150px;">完整代码</div> 
<div style="height:200px;width:100%;">HTML5已经去掉name属性，实现锚点时请使用id</div> 
<div id="habotalkfoo" style="width:100%;height:276px;background: url(http://www.habotalk.com/wp-content/uploads/2015/08/attachment.aspx_.jpg); background-position:center top; background-repeat:no-repeat;text-align:center;"><a href="#habotalk" target="_self">回到顶部</a></div>
</body> 
</html>

这样的定位可以针对任何标签来定位。

2、使用name定位：

<a href="#cc">我是锚点</a> 
</br></br></br></br><br />rtujhyr
 <br />
 <br />
 <br />rjn
 <br />
 <br />
 <br />
 <br />
 <br />fgjmny
 <br />
 <br />
 <br />dfgvf
 <br />
 <br />sdffgvergdwefg
 <br />
 <br />
 <br />rtjmnyt
 <br />
 <br />
 <br />sdfvvvdsfdvb
 <br />
 <br />sdfdg
<a name="cc">我在这里</href>

使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。

3、使用js定位

<li class="" onclick="javascript:document.getElementById('maodian').scrollIntoView()"></li>

通过获取dom中的id，点击之后滑动到id所在的位置。

未经允许不得转载：哈勃私语 » html中设置锚点链接的注意事项

本文共2440个字创建时间：2016年12月30日11:20

相关推荐