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 Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
jQuery实现日历效果
Sep 11 jQuery
jquery简易手风琴插件的封装
Oct 13 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python过滤列表用法实例分析
2016/04/29 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
金融学专业大学生职业生涯规划
2014/03/07 职场文书
新年联欢会主持词
2014/03/27 职场文书
股权收购意向书
2014/04/01 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
青春励志演讲稿
2014/04/29 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android