offsetTop与jQuery.offset（）。top

我已经阅读过，offsetLeft并且offsetTop不能在所有浏览器中正常工作。 jQuery.offset()应当为此提供一个抽象，以提供正确的值xbrowser。

我想做的是获取相对于元素左上角单击元素的位置的坐标。

问题是jQuery.offset().top实际上是在FFX 3.6中给了我一个十进制值（在IE和Chrome中，这两个值匹配）。

这个小提琴展示了这个问题。如果单击底部图像，则jQuery.offset().top返回327.5，但offsetTop返回328。

我想认为这offset()是返回正确的值，我应该使用它，因为它可以在所有浏览器中使用。但是，人们显然不能单击像素的小数位。是确定Math.round()jQuery返回的偏移量的真实偏移量的正确方法吗？我应该使用offsetTop替代方法还是完全使用其他方法？

我认为您说的是人们不能点击半个像素是正确的，所以就我个人而言，我将使用舍入的jQuery偏移量...

这就是jQuery API Doc所说的.offset()：

获取第一个元素的当前坐标，或设置匹配元素集中相对于document的每个元素的坐标。

这就是MDN Web API所说的.offsetTop：

offsetTop返回当前元素相对于offsetParent节点顶部的距离

这是jQuery v.1.11.offset()在获取坐标时的基本操作：

var box = { top: 0, left: 0 };

// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
  box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
  top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
  left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};

• pageYOffset 直观地说页面滚动了多少
• docElem.scrollTop 是IE <9的后备（jQuery 2不支持BTW）
• docElem.clientTop 是元素顶部边框的宽度（在这种情况下为文档）
• elem.getBoundingClientRect()获取相对于文档 视口的坐标（请参见注释）。它可能返回分数值，因此这是您的错误的来源。缩放页面时，它也可能导致IE <8中的错误。为了避免分数值，请尝试迭代计算位置

结论

• 如果要相对于父节点的坐标，请使用element.offsetTop。element.scrollTop如果要考虑父级滚动，请添加。（如果您是该库的粉丝，请使用jQuery .position（））
• 如果要相对于视口的坐标，请使用element.getBoundingClientRect().top。window.pageYOffset如果要考虑文档滚动，请添加。clientTop如果文档没有边框（通常没有边框），则无需减去文档的数量，因此您具有相对于文档的位置
• element.clientTop如果您不将元素边框视为元素的一部分，则减去

试试这个： parseInt(jQuery.offset().top, 10)

可能的是，在offset可能是一个非整数，使用em作为测量单元，相对于font-sizes在%。

我还理论化的是，offset可能不是一个整数时，zoom是不是100%，但是这取决于浏览器程序如何处理缩放。

您可以使用在所有浏览器中parseInt(jQuery.offset().top)始终使用Integer（原始- int）值。