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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
Sample script that deletes a SQL Server database
Jun 16 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
总结js中的一些兼容性易错的问题
Dec 18 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
vue实现购物车的小练习
Dec 21 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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
python缩进区别分析
2014/02/15 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
python suds访问webservice服务实现
2020/06/26 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
教师节演讲稿
2014/05/06 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
埃及王子观后感
2015/06/16 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
小程序自定义轮播图圆点组件
2022/06/25 Javascript