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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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.ini中文版
2006/10/09 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
javascript 函数调用的对象和方法
2010/07/01 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python实现全排列的打印
2018/08/18 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
大学军训自我鉴定
2013/12/15 职场文书
实用求职信范文分享
2013/12/25 职场文书
商务考察邀请函范文
2014/01/21 职场文书
公司营业员的自我评价
2014/03/04 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
找工作求职信
2014/07/07 职场文书
美术学专业求职信
2014/07/23 职场文书
认错检讨书
2014/10/02 职场文书
行政介绍信范文
2015/05/04 职场文书
优秀员工演讲稿
2019/06/21 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书