本文实例讲述了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程序设计有所帮助。
新闻热点
疑难解答