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遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
五段实用的js高级技巧
Dec 20 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
深入理解node.js之path模块
May 03 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
Vue3.0 手写放大镜效果
Jul 25 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判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
JavaScript 学习 - 提高篇
2007/02/02 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python书单 不将就
2017/07/11 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python中format()函数的简单使用教程
2018/03/14 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
详解Python是如何实现issubclass的
2019/07/24 Python
python常用排序算法的实现代码
2019/11/08 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python中return函数返回值实例用法
2020/11/19 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
亲子活动总结
2014/04/26 职场文书
上课不认真检讨书
2014/09/17 职场文书
委托书的样本
2015/01/28 职场文书
预备党员介绍人意见
2015/06/01 职场文书