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 相关文章推荐
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
简谈创建React Component的几种方式
Jun 15 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
python生成随机密码或随机字符串的方法
2015/07/03 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
幼儿园老师辞职信
2014/01/20 职场文书
竞聘自述材料
2014/08/25 职场文书
大学辅导员述职报告
2015/01/10 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
辞职离别感言
2015/08/04 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
总结python多进程multiprocessing的相关知识
2021/06/29 Python
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python