jQuery Tutorial Tutorials - jQuery .offset() method

The .offset() method in jQuery is used to get/set the coordinates of the selected element,relative to the document.

jQuery .offset() method Syntax

.offset()
.offset(coordinates)
.offset(function)

.offset()

Get the current coordinates of the first matched element relative to the document.

example

Get the offset of the first paragraph

var offset = $("p").offset();
$('#Top').text('Top:' + offset.top);
$('#left').text('Left:' + offset.left);
console.log(offset);

Try now

.offset(coordinates)

Set the coordinates of every matched elements

example

Set the offset of each paragraph with same coordinates relative to the document

$("p").offset({top:100,left:50});

Try now

.offset(function)

Set the offset of each paragraph with different coordinates

$("p").offset(function(index,oldValue){
    var top = 30*index + 100;
    var left = 20*index + 50;
    return {top:top,left:left};
});

Try now