Code has been added to clipboard!

Manipulate Element Coordinates With the jQuery .offset() Method

Reading time 1 min
Published Jan 19, 2018
Updated Oct 1, 2019

jQuery offset: Main Tips

  • jQuery .offset() returns the coordinates of the first matched element as an object with left and top properties.
  • It cannot be used to get the coordinates of elements that are hidden.
  • offset jQuery method differs from .position() since it returns element position in relation to the document, not the offset parent.

Using .offset() Method

The jQuery .offset() function returns the coordinates of the first detected element relative to the document. It can also set the coordinates of the selected elements as well.

The example below returns the coordinates of the <p> element:

Example
$("button").click(() => {
    var position = $("p").offset();
    alert("X: " + position.top + " Y: " + position.left);
});

To make jQuery get position coordinates, you don't need any arguments:

$(selector).offset();

Use this syntax to make jQuery set position of elements:

$(selector).offset({top:newValue, left:newValue});

You can use a function returning the coordinates to set for the .offset() jQuery method as well.

Note: when placing an HTML element at the top of an existing page for global manipulation, jQuery .offset() is a better choice than .position().

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 27/01/2021
3176 People Used
Only 97 Left
Rating
5.0