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程序设计有所帮助。

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
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
You might like
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Python给图像添加噪声具体操作
2019/03/03 Python
Python字节单位转换实例
2019/12/05 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
SQL面试题
2013/12/09 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript