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学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
jquery插件validate验证的小例子
May 08 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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
全国中波电台频率表
2020/03/11 无线电
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
javascript的this关键字详解
2019/05/20 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
门卫班长岗位职责
2013/12/15 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
中学社团活动总结
2015/05/07 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
redis实现排行榜功能
2021/05/24 Redis