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 相关文章推荐
jQuery实现的立体文字渐变效果
May 17 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
js实现文字滚动效果
Mar 03 Javascript
js运动事件函数详解
Oct 21 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
详解jQuery-each()方法
Mar 13 jQuery
layui 对弹窗 form表单赋值的实现方法
Sep 04 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 高效率写法 推荐
2010/02/21 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
javascript时间函数大全
2014/06/30 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
javascript每日必学之循环
2016/02/19 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python 列表理解及使用方法
2017/10/27 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
Django自定义manage命令实例代码
2018/02/11 Python
python 日期操作类代码
2018/05/05 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
七夕相亲活动策划方案
2014/08/31 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
酒店员工手册范本
2015/05/14 职场文书
六一亲子活动感想
2015/08/07 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis