本文實例講述了JS錨點的設置與使用方法。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>錨點</title> </head> <body> <ul> <li><a href="javascript:void(0);" onclick="naver('A')">錨點A</a></li> <li><a href="javascript:void(0);" onclick="naver('B')">錨點B</a></li> <li><a href="javascript:void(0);" onclick="naver('C')">錨點C</a></li> <li><a href="javascript:void(0);" onclick="naver('D')">錨點D</a></li> </ul> <div style="background-color: #f60; height: 400px;" id="A"> AAA </div> <div style="background-color: #f06; height: 400px;" id="B"> BBB </div> <div style="background-color: #60f; height: 400px;" id="C"> CCC </div> <div style="background-color: #06f; height: 400px;" id="D"> DDD </div> <script> //設置錨點 function naver(id){ var obj = document.getElementById(id); var oPos = obj.offsetTop; return window.scrollTo(0, oPos-36); } </script> </body> </html>
效果圖:
更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript遍歷算法與技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。