首頁 > 開發者 > JavaScript
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屬性值，但是前面要加#。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
