jQuery实现点击滚动到指定元素上的方法分析
更新时间：2020年03月19日 15:00:44 作者：星耀学园
这篇文章主要介绍了jQuery实现点击滚动到指定元素上的方法,结合实例形式分析了jQuery响应鼠标事件动态操作页面元素属性的相关相关使用技巧,需要的朋友可以参考下
本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jquery 漂亮的删除确认和提交无刷新删除,本例数据库结构很简单，就一个字段就行了，具体的实现代码如下，感兴趣的朋友可以参考下2013-11-11
这篇文章主要为大家详细介绍了基于jquery实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
下面小编就为大家带来一篇JQuery页面随滚动条动态加载效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
本篇文章主要给大家分享jQuery与vue分别实现超级简单的绿色拖动验证码功能以及代码实例，需要的朋友学习下吧。2018-01-01
JQuery Ajax WebService传递参数的简单实例
下面小编就为大家带来一篇JQuery Ajax WebService传递参数的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了jQuery实现的自适应焦点图效果,结合完整实例形式分析了jQuery事件响应及动态操作页面元素属性的相关技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了三分钟带你玩转jQuery.noConflict() 的相关资料,需要的朋友可以参考下2016-02-02
jQuery.extend 函数的详细用法，学习jquery的朋友可以参考下2012-06-06
这篇文章主要为大家详细介绍了jquery插件说下无缝轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
验证码提示功能在ui界面的登陆及提交窗口中起到了一定的有好作用，极大的提高了用户体验，本文带着这个美好的祝愿为您实现简单验证码提示,需要的朋友可以了解下2012-12-12
最新评论