jquery 仿锚点跳转到页面指定位置的实例


Posted in Javascript onFebruary 14, 2017

js 仿锚点跳转到页面指定位置,用的是 offset() 方法

$(document).ready(function(){

 var target_top = $("#qa5").offset().top;
 //$("html,body").animate({scrollTop: target_top}, 1000);  //带滑动效果的跳转
 $("html,body").scrollTop(target_top);

  });

jQuery:

offset():

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。

position():

获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

scrollTop() :

方法设置或返回被选元素的垂直滚动条位置。

提示:当滚动条位于最顶部时,位置是 0。

当用于返回位置时:

该方法返回第一个匹配元素的滚动条的垂直位置。

当用于设置位置时:

该方法设置所有匹配元素的滚动条的垂直位置。

以上这篇jquery 仿锚点跳转到页面指定位置的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
js点击选择文本的方法
Feb 09 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
js replace()去除代码中空格的实例
Feb 14 #Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 #Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 #Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 #Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 #Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 #Javascript
Bootstrap中data-target 到底是什么
Feb 14 #Javascript
You might like
php合并js请求的例子
2013/11/01 PHP
php常用正则函数实例小结
2016/12/29 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
python二叉树遍历的实现方法
2013/11/21 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python中常见的数据类型小结
2015/08/29 Python
Python的re模块正则表达式操作
2016/05/25 Python
点球小游戏python脚本
2018/05/22 Python
python实现控制COM口的示例
2019/07/03 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python configparser模块操作代码实例
2020/06/08 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
中文专业求职信
2014/06/20 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2014年工商所工作总结
2014/12/09 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
vue项目支付功能代码详解
2022/02/18 Vue.js
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫