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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
Jquery插件 easyUI属性汇总
Jan 19 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
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编程语言开发动态WAP页面
2006/10/09 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python绘制封闭多边形教程
2020/02/18 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
苹果美国官方商城:Apple美国
2016/08/24 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
AJax面试题
2014/11/25 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
教你用python控制安卓手机
2021/05/13 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python