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 相关文章推荐
文本加密解密
Jun 23 Javascript
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
微信小程序实现禁止分享代码实例
Oct 19 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
随机广告显示(PHP函数)
2006/10/09 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
python中ConfigParse模块的用法
2014/09/29 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
Python devel安装失败问题解决方案
2020/06/09 Python
Python下载的11种姿势(小结)
2020/11/18 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
交通安全标语
2014/06/06 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015年父亲节寄语
2015/03/23 职场文书
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android