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 相关文章推荐
javascript函数中的arguments参数
Aug 01 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
js添加绑定事件的方法
May 15 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
微信小程序实现留言板
2018/10/31 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
python实现查询IP地址所在地
2015/03/29 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
环境工程专业自荐信范文
2014/06/24 职场文书
教师个人教学总结
2015/02/11 职场文书
紧急通知
2015/04/17 职场文书
恰同学少年观后感
2015/06/08 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
Python之matplotlib绘制折线图
2022/04/13 Python
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs