Home >>jQuery Tutorial >jQuery offset() Method

jQuery offset() Method

jQuery offset() Method

jQuery offset() method is used to set or returns the offset coordinates for the given selected elements, relative to the document. It returns the offset coordinates of the FIRST matched element and sets the offset coordinates of ALL matched elements.

Syntax:
Return the offset coordinates: $(selector).offset()
Set the offset coordinates: $(selector).offset({top:value,left:value})
Set offset coordinates using a function: $(selector).offset(function(index,currentoffset))

Parameter Values

Parameter Description
{top:value,left:value} It is a Required parameter used when setting the offset and is used to specifies the top and left coordinates in pixels.

Possible values:

  • Name/Value pairs, like {top:50,left:50}
function(index,currentoffset) It is Optional parameter and is used to returns an object containing the top and left coordinates of the specified function
  • index – used to returns the index position of the element
  • currentoffset – used to returns the current coordinates of the selected element
Here is an Example of jQuery offset() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
var x = $(".txt").offset();
alert("Top: " + x.top + " Left: " + x.left);
});
});
</script>
</head>
<body>
<p class="txt">This is Phptpoint.</p>
<button class="btn1">click me to return the offset coordinates</button>
</body>
</html>

Output:

This is Phptpoint.