JS锚点的设置与使用方法

2019-09-08 09:39:42来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

锚定通常用于网页,尤其是长网页,这将增加用户体验,本文是爱站技术频道小编为大家整理的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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:jquery基本选择器匹配多个元素的实现方法

下一篇:JS查找字符串中出现次数最多的字符