【小5聊】jquery基础之offset和position的top、left值

最新推荐文章于 2023-10-13 10:44:27 发布
最新推荐文章于 2023-10-13 10:44:27 发布
阅读量1.7k 收藏
点赞数
分类专栏： jQuery 文章标签： jquery html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmy_520/article/details/121929833
版权
本文介绍了如何在JavaScript中利用offset()和position()方法，当下拉列表展开时，使其自动滚动到指定的列表项。通过获取li在ul中的top偏移值和ul在整个文档的top偏移值，可以精确设置滚动位置，确保目标标签可见。这个技巧在前端开发中常用于优化用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

假如有这么一个需求，当打开下拉ul列表，列表值能够滚动到指定li中显示

1、offset()

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。

 2、position()

position() 方法返回匹配元素相对于父元素的位置（偏移）。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。

3、由以上概念可知，获取li在ul中的top偏移值，需要使用position()

4、由以上概念可知，获取ul在整个文档的top偏移值，需要使用offset()

5、设置滚动值

$("body").scrollTop();
$("body").scrollLeft();

记得目标标签不能隐藏

jq获取和设置偏移量：offset（）、position（）
YY的博客
11-11 2087
position（）、offset（）、
Jquery中的offset()和position()深入剖析
01-21
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。 position(): 获取匹配元素相对父元素的偏移。 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用...
jquery的offset().top 和position().top 详解 和如何用js实现
annuobin1120的博客
12-20 570
1 jquery定义： 　　offset().top 相对于当前文档的坐标（的高度）　　　　　　　　　　　ps:包括滚动条卷去的高度 　　position().top 返回的是相对于其定位的祖辈元素的坐标（的高度） 　　　　　　　　　　　　ps:包括滚动条卷去的高度 一图胜千言！ 统一前提 绿色容器 margin-top: 10px 　　每一个红色...
jquery position
蝶飞鸿云 志化燕雀(http://jxnuprk.cnblogs.com/)
08-25 287
5.2.3 position prk/彭仁夔 08-08-25 在给元素定位之前，我们首先要了解一些CSS定位相关的知识。 在CSS中关于定位的内容是：position:relative | absolute | static | fixed 。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层...
Jquery中用offset（）.top和offsetTop的比较
weixin_34409357的博客
04-30 1608
今天，想测试一个div与顶部的距离，用的是.offsetTop，但是offsetTop获得的值，怎么都打印不出来。折腾了半天，打印的结果都是undefined，虽然网上很多资料都说返回的是数值。虽然这个函数永不了，但是黄显钦找到了一个可以替代offsetTop的函数。那就是jquery的offset().top   我们先来了解一下，什么是offset（）.top和offsetTop？   ...
Jquery中offset()和position()的区别分析
12-09
在jQuery中，`offset()`和`position()`方法都是用来获取元素位置的重要工具，但它们有着本质的区别。理解这些差异对于精确地控制页面元素布局至关重要。 首先，`offset()`方法用于获取匹配元素在当前视口（浏览器...
jQuery.position()方法获取不到值的安全替换方法
10-24
这段代码首先定义了一个函数，它在传入的jQuery对象上调用，并且返回一个对象，其中包含了通过上述计算得到的相对于父元素的left和top值。通过这种方式，即使在谷歌或IE浏览器中使用.position()方法获取不到值，也...
jquery计算出left和top,让一个div水平垂直居中的简单实例
10-21
通过计算`$("#cont1").offset().left`和`$("#cont1").position().left`以及`$("#cont1").offset().top`和`$("#cont1").position().top`的差值，我们可以得到由于滚动而产生的偏移量，然后将这些偏移量加到`left`和`...
JQuery position().top和offset().top的区别
椒盐薄荷糖
05-18 8468
Position():获取匹配元素集合中第一个元素的当前坐标。相对于偏移父元素。相对于offset parent的当前坐标值Offset():获取第一个元素的当前坐标，或者将每个元素的坐标设置为相对于文档的匹配元素集合。相对于偏移document。应用实例:点击edit，在下方添加一个编辑框，实现修改地址功能。每次都自动定位到当前正在编辑的按钮坐标。如图：代码实现：/**  * Add Addre...
jquery的offset().top与javascript的offsetTop区别？
weixin_30731287的博客
08-16 238
offset().top是jquery的方法，需引入jquery，它获取你绑定元素上边框相对于html上边界的偏移量 offsetTop是原生js的方法，它获取你绑定元素上边框相对于离自己最近且position属性为非static的祖先元素的偏移量 区别一：offset（）.top与offsetTop偏移量参照对象不同，offset().top始终是html，而offsetTop相对...
jquer结合offsetLeft()属性实现计算移动距离
最新发布
菠萝爱吃草莓的博客
10-13 312
jquer结合offsetLeft()属性实现计算移动距离
jQuery的offset().top与JS的offsetTop的区别
weixin_40758850的博客
05-13 1881
这是我在做播放器的水平方向和竖直方向的拖拽进度条遇到的问题。一开始我老想着这两个方法的效果应该是一样的，结果就被它搞了很久很久。后来我发现这两者的区别其实就是对象的作用域不同（不知道这么说行不行） 这里我就拿offsetTop举例子 jQuery的offset().top 它获取的值==你获取的元素的上边框距离可视区域的顶部的值 JS的offsetTop 它获取的值==你获取的元素的上边框距离与它...
Jquery 中 offset() 方法
10-07 2033
一、语法     1、 返回偏移坐标          $(selector).offset();          top: $(selector).offset().top;          left: $(selector).offset().left;     2、设置偏移坐标：          $(selector).offset({top:val
关于JS下offsetLeft，style.left，以及jquery中的offset().left，css("left")的区别。
zzxboy1的博客
07-23 4972
最近因为工作需要，仔细研究了一下关于JS下offsetLeft，style.left，以及jquery中的offset().left，css("left")的区别。 JS下的offsetLeft和style.left，以及jquery的css("left")，对定位的理解相似，如果父元素中有定位元素，都是相对于上一个定位元素（position不为static）定位。 值得一提的是如果没有已经定
获取position的top、left
re_raise的博客
08-26 1024
JavaScript中，某标签设置position属性，获取/修改其top、left值 str.value.top=a; str.value.left=b; //str表示设置了position属性的元素 ie中可以使用，Chrome中不行
JQ的offset().top与js的offsetTop区别详解
weixin_30731305的博客
12-20 1104
一、前言 最近在做一个图片懒加载的插件，就纵轴(Y轴)而言，我需要时时获取图片的上偏移量，好判断是否已进入视图区域，而我所理解的是offsetTop应该是跟offset().top一样的，然后陷入了因为不了解它们区别，而带来BUG的死坑。这里通过实验整理，做个清晰好懂的笔记，如果你也想弄清，建议复制我的代码跟着操作，印象会更为深刻。 二、offset().top与offsetTop什么意思？它...
jQuery API之offset、position、scrollLeft的使用
weixin_33725272的博客
05-24 194
offset 参数： object：offset对象：包含left, top属性 作用： 获取jQ对象距离文档的left, top值 设置jQ对象距离文档的left, top值 说明： 该函数的参照对象永远是文档对象(document) 原生的offset系列则以距离最近且有定位的父元素为参照对象，没有才以文档对象为参照对象 code： .wrapper { posi...
jQuery深入解析：offset()与position()的差异
"深入理解Jquery中的offset()和position()方法" 在jQuery库中，`offset()`和`position()`是两个非常重要的定位方法，它们都用于获取元素的位置信息，但应用场景和计算方式有所不同。 首先，`offset()`方法用于获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈小5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值