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实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
js模糊查询实例分享
Dec 26 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
vue-iview动态新增和删除的方法
Jun 17 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实现MySQL更新记录的代码
2008/06/07 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
杨氏矩阵查找的JS代码
2013/03/21 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
python中的错误处理
2016/04/10 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python监控键盘输入实例代码
2018/02/09 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
numba提升python运行速度的实例方法
2021/01/25 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
企业总经理职责
2014/02/02 职场文书
入党自荐书范文
2014/03/09 职场文书
工地安全标语
2014/06/07 职场文书
校园标语大全
2014/06/19 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
员工评语范文
2014/12/31 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
小学班长竞选稿
2015/11/20 职场文书