JS锚点的设置与使用方法
2019-09-08 09:39:42来源:爱站网 阅读 ()
锚定通常用于网页,尤其是长网页,这将增加用户体验,本文是爱站技术频道小编为大家整理的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>
效果图:
上述就是JS锚点的设置与使用方法的全部内容,相关知识我们不断收集而来。更多内容尽请期待,喜欢就请收藏爱站技术频道吧!
原文链接:https://js.aizhan.com/develop/JavaScript/8728.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- BootStrap 标题设置跨行无效的解决方法 2020-01-17
- JS实现数组按升序及降序排列的方法 2019-12-15
- 详解bootstrap table表格的使用方法 2019-12-14
- 分享connect中间件session、cookie的使用方法 2019-12-10
- JS实现简单的顶部定时关闭层效果 2019-11-30
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash