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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
动态加载js、css的实例代码
May 26 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
JavaScript实现音乐导航效果
Nov 19 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中的正规表达式(二)
2006/10/09 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
php析构函数的简单使用说明
2015/08/24 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
使用console进行性能测试
2015/04/27 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
Python 中pandas.read_excel详细介绍
2017/06/23 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
PHP面试题附答案
2015/11/28 面试题
财务会计专业求职信范文
2013/12/31 职场文书
门前三包责任书
2014/04/15 职场文书
大专生求职信
2014/06/29 职场文书
环保公益策划方案
2014/08/15 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL