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+PHP+Mysql实现抽奖程序
Apr 12 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 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中通过curl smtp发送邮件
2012/06/05 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
javascript测试题练习代码
2012/10/10 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JS中创建函数的三种方式及区别
2016/03/13 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
zbar解码二维码和条形码示例
2014/02/07 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python 创建TCP服务器的方法
2020/07/28 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
交通事故协议书范文
2014/10/23 职场文书
护理实习生带教计划
2015/01/16 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书