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 相关文章推荐
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 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
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
中国旅游网站:途牛旅游网
2019/09/29 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
商业融资计划书
2014/04/29 职场文书
供应链金融服务方案
2014/05/25 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
学校联谊协议书
2014/09/16 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
班主任寄语2016
2015/12/04 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python