编程 Javascript

JS锚点的设置与使用方法

Posted in Javascript onSeptember 05, 2016

本文实例讲述了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锚点的设置与使用方法

希望本文所述对大家JavaScript程序设计有所帮助。

JS锚点的设置与使用方法

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript下有关dom以及xml节点访问兼容问题

Nov 26 Javascript

js转化毫秒为时间格式代码

Apr 10 Javascript

在JavaScript中操作数组之map()方法的使用

Jun 09 Javascript

jquery实现的Banner广告收缩效果代码

Sep 02 Javascript

详解Bootstrap创建表单的三种格式（一）

Jan 04 Javascript

Bootstrap自定义文件上传下载样式

May 26 Javascript

详解Javascript几种跨域方式总结

Feb 27 Javascript

JavaScript正则替换HTML标签功能示例

Mar 02 Javascript

jQuery插件之validation插件

Mar 29 jQuery

SSM+layUI 根据登录信息显示不同的页面方法

Sep 20 Javascript

Vue用mixin合并重复代码的实现

Nov 27 Vue.js

vue 页面跳转的实现方式

Jan 12 Vue.js

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

Sep 05 #Javascript

Vue.js实现一个自定义分页组件vue-paginaiton

Sep 05 #Javascript

jquery层级选择器(匹配父元素下的子元素实现代码)

Sep 05 #Javascript

Vue.js每天必学之计算属性computed与$watch

Sep 05 #Javascript

jQuery实现的导航下拉菜单效果示例

Sep 05 #Javascript

jquery层级选择器的实现(匹配后代元素div)

Sep 05 #Javascript

Vue.js每天必学之数据双向绑定

Sep 05 #Javascript