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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jquery插件实现轮播图效果
Oct 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开发文件系统实例讲解
2006/10/09 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
python简单实现获取当前时间
2016/08/27 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python按比例随机切分数据的实现
2019/07/11 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
pygame实现打字游戏
2021/02/19 Python
新学期校长寄语
2014/01/18 职场文书
读书小明星事迹材料
2014/05/03 职场文书
七夕活动策划方案
2014/08/16 职场文书
庆七一活动总结
2014/08/27 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js
Java完整实现记事本代码
2022/06/16 Java/Android