html5的强大让我感觉越发兴奋,今天在写一个js demo---网页定位导航特效的时候,在涉及到页面的快速定位的时候,我还以为要用很复杂的js实现,结果之后才发现,html5有一个很酷的效果,虽然这个锚点特效只能支持Chrome，火狐，IE8以上等浏览器。但是在不考虑一些旧的浏览器的兼容情况的时候,可以使用,而且效果是杠杠的
在html5中,锚点使用id名称而不再是name属性了
demo 例子:
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"/> <title>山寨版购物网--实现网页定位导航系统</title> <style> body{margin: 0;padding: 0;} h1{margin-left: 20px;} .content{ width:1063px;margin: 0 auto;height: 5000px;} ul{list-style: none;} .item{width:826px;margin: 0 auto;height: 1000px;margin-bottom: 30px;border:1px dotted #0088bb;} .item li{width:250px;height: 300px;float: left;display: inline;margin-right: 10px;border:1px solid #0088bb;} .item h2{font-size: 16px;margin-bottom: 10px;clear: both;} img{width:250px;height: 300px;} #menu{ position: fixed;top:100px;left: 50%;margin-left: 380px;width: 80px;} #menu li a{ display: block;margin: 5px 0;font-size: 14px;font-weight: bold;color: #333;width: 80px;height: 50px;line-height: 50px;text-decoration: none;text-align: center;} #menu ul li a:hover, #menu ul li a .current{ color: #fff; background: #0088bb; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#item1">1F 洗浴</a></li> <li><a href="#item2">2F 美妆</a></li> <li><a href="#item3">3F 童装</a></li> <li><a href="#item4">4F 书籍</a></li> <li><a href="#item5">5F 数码</a></li> </ul> </div> <div class="content"> <h1>购物网</h1> <div id="item1" class="item"> <h2>1F 洗浴</h2> <ul> <li><a href=""><img src="1.jpg" alt=""/></a></li> <li><a href=""><img src="1.jpg" alt=""/></a></li> <li><a href=""><img src="1.jpg" alt=""/></a></li> <li><a href=""><img src="1.jpg" alt=""/></a></li> <li><a href=""><img src="1.jpg" alt=""/></a></li> <li><a href=""><img src="1.jpg" alt=""/></a></li> <li><a href=""><img src="1.jpg" alt=""/></a></li> <li><a href=""><img src="1.jpg" alt=""/></a></li> <li><a href=""><img src="1.jpg" alt=""/></a></li> </ul> </div> <div id="item2" class="item"> <h2>2F 美妆</h2> <ul> <li><a href=""><img src="2.jpg" alt=""/></a></li> <li><a href=""><img src="2.jpg" alt=""/></a></li> <li><a href=""><img src="2.jpg" alt=""/></a></li> <li><a href=""><img src="2.jpg" alt=""/></a></li> <li><a href=""><img src="2.jpg" alt=""/></a></li> <li><a href=""><img src="2.jpg" alt=""/></a></li> <li><a href=""><img src="2.jpg" alt=""/></a></li> <li><a href=""><img src="2.jpg" alt=""/></a></li> <li><a href=""><img src="2.jpg" alt=""/></a></li> </ul> </div> <div id="item3" class="item"> <h2>3F 童装</h2> <ul> <li><a href=""><img src="3.jpg" alt=""/></a></li> <li><a href=""><img src="3.jpg" alt=""/></a></li> <li><a href=""><img src="3.jpg" alt=""/></a></li> <li><a href=""><img src="3.jpg" alt=""/></a></li> <li><a href=""><img src="3.jpg" alt=""/></a></li> <li><a href=""><img src="3.jpg" alt=""/></a></li> <li><a href=""><img src="3.jpg" alt=""/></a></li> <li><a href=""><img src="3.jpg" alt=""/></a></li> <li><a href=""><img src="3.jpg" alt=""/></a></li> </ul> </div> <div id="item4" class="item"> <h2>4F 书籍</h2> <ul> <li><a href=""><img src="4.jpg" alt=""/></a></li> <li><a href=""><img src="4.jpg" alt=""/></a></li> <li><a href=""><img src="4.jpg" alt=""/></a></li> <li><a href=""><img src="4.jpg" alt=""/></a></li> <li><a href=""><img src="4.jpg" alt=""/></a></li> <li><a href=""><img src="4.jpg" alt=""/></a></li> <li><a href=""><img src="4.jpg" alt=""/></a></li> <li><a href=""><img src="4.jpg" alt=""/></a></li> <li><a href=""><img src="4.jpg" alt=""/></a></li> </ul> </div> <div id="item5" class="item"> <h2>5F 数码</h2> <ul> <li><a href=""><img src="5.jpg" alt=""/></a></li> <li><a href=""><img src="5.jpg" alt=""/></a></li> <li><a href=""><img src="5.jpg" alt=""/></a></li> <li><a href=""><img src="5.jpg" alt=""/></a></li> <li><a href=""><img src="5.jpg" alt=""/></a></li> <li><a href=""><img src="5.jpg" alt=""/></a></li> <li><a href=""><img src="5.jpg" alt=""/></a></li> <li><a href=""><img src="5.jpg" alt=""/></a></li> <li><a href=""><img src="5.jpg" alt=""/></a></li> </ul> </div> </div> </body> </html>html5的功能还是很强大的,希望各浏览器能早日统一