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使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现简单评论功能
Aug 19 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
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
vue slot与传参实例代码讲解
2019/04/28 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python使用append合并两个数组的方法
2015/04/28 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
离婚协议书应该怎么写
2014/10/12 职场文书
保送生自荐信范文
2015/03/26 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
正确使用MySQL update语句
2021/05/26 MySQL
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android