JQuery Object has offsetTop value different than what offset function returns

Question

So i'm trying to figure out something going on with jQuery's offSet function and the actual objects offset. When I do console.log for my object it shows an offsetTop of 21294. However when I do the jQuery function call for offset().top, im getting 22069. The body had no padding or margin, so im at a bit of a loss of why everything is returning so differently. There is a top margin of 30 on the object, but that is about it.

offsetTop is set to 21294

dave · Accepted Answer · 2014-06-29 18:02:09Z

2

They do different things.

From jQuery's site for offset:

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

From Mozilla's JS docs on offsetTop:

The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.

So you are measuring one relative to the document, one relative to the offsetParent node.

Typically a positioned div or table will act as an offset container to any element contained inside them.

In your case it appears to be div#resizable.main-content

answered Jun 29, 2014 at 18:02

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Hall Over a year ago

thanks dave. come to find out, it looks like the dev before me had a bunch of divs displaying, but on document ready they hid them, therefore still making them count on the offset, but messing up the scroll.

Collectives™ on Stack Overflow

JQuery Object has offsetTop value different than what offset function returns

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related