jQuery实现点击滚动到指定元素上的方法分析


Posted in jQuery onMarch 19, 2020

本文实例讲述了jQuery实现点击滚动到指定元素上的方法。分享给大家供大家参考,具体如下:

jquery 点击滚动到指定元素上,

1.获取指定元素的offset() 得到偏移位置,返回结果是top 和left  获取offset().top , offset().left 单位是像素 只对可见元素有效

2.body 和html 使用animate方法的scrollTop股东到指定位置

3.id参数为滚动到指定元素的ID, p_top是指定元素的margin 和padding值,这个值暂时没有意义

function scrollPosition(id,p_top) {
 
   /*获取某个元素的相对偏移,此元素必须是可见的,返回值是top 和left 单位是像素 移动到固定元素上尽可能使用padding
    *
    *
    *
    * */
   var offset= $(id).offset();
   console.log(offset);
 
   $('body,html').animate({
     scrollTop:offset.top+p_top
   })
 };
 
 $("#pingtai").click(function () {
   scrollPosition('#pingtaijieshao','-800')
 })
 $("#jishu").click(function () {
   scrollPosition('#jishutedian','-800')
 })

HTML绑定

<ul class="menhu_topMenuClass pingtai_TopMenuClass">
      <li>
        <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="on" id="pingtai">平台介绍</a>
      </li>
      <li>
        <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="end" id="jishu">技术特点</a>
      </li>
 
    </ul>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
jquery实现垂直手风琴菜单
Mar 04 #jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
jquery实现直播视频弹幕效果
Feb 25 #jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
You might like
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
Python continue语句用法实例
2014/03/11 Python
python根据日期返回星期几的方法
2015/07/06 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
违反课堂纪律检讨书
2014/01/19 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
保护地球的标语
2014/06/17 职场文书
怎样写观后感
2015/06/19 职场文书
客户答谢会致辞
2015/07/30 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
redis实现共同好友的思路详解
2021/05/26 Redis