html利用锚点实现定位代码实例
本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平滑定位到某元素代码一章节。 下面通过代码实例介绍一下html是如何实现锚点定位的。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>http://www.100sucai.com</title> <style type="text/css"> .a{ width:60px; height:20px; background:#F90; font-size:12px; text-align:center; line-height:20px; position:fixed; right:0px; top:50px; cursor:pointer; display:block; text-decoration:none; } #thediv{ width:100%; height:50px; background:#CCC; margin-top:100px; } </style> </head> <body style="height:1000px;"> <a class="a" href="#thediv">点击定位</a> <div id="thediv"> <li><a href="http://www.100sucai.com/web/jquerytexiao/daohangcaidan/" title="导航菜单">导航菜单</a></li> <li><a href="http://www.100sucai.com/web/jquerytexiao/xuanxiangka/" title="table选项卡">table选项卡</a></li> </div> </body> </html>
以上代码实现了锚点定位效果,代码非常的简单,将链接a的href属性值设置为要定位元素的id属性值,但是前面要加#。