Positions and scrolling

jQuery provides two methods for getting the position of an element. Both of these methods return a JavaScript object that contains two properties: top and left, which indicate the top and left values of the element.

The two methods use different origins from which their relative computed values are measured. One of these methods, offset(), returns the position relative to the document.

Method syntax: offset
offset()
Returns the current coordinates (in pixels) of the first element in the set, relative to the document.
Parameters
none
Returns
An object with left and top properties as numbers depicting the position in pixels relative to the document.

This method can also be used to set the current coordinates of one or more elements.

Method syntax: offset
offset(coordinates)
Sets the current coordinates (in pixels) of all the elements in the set, relative to the document.
Parameters
coordinates	(Object|Function) An object containing the properties top and left, which are numbers indicating the new top and left coordinates for the elements in the set. If a function is provided, it’s invoked for each element in the set, passing that element as the function context (this) and passing two values: the element index and the object containing the current values of top and left. The function’s returned object is used to set the new values.
Returns
The jQuery collection.

The other method, position(), returns values relative to an element’s closest offset parent. The offset parent of an element is the nearest ancestor that has an explicit positioning rule of relative, absolute, or fixed defined. The syntax of position() is as follows.

Method syntax: position
position()
Returns the position (in pixels) of the first element in the set relative to the element’s closest offset parent
Parameters
none
Returns
An object with left and top properties as numbers depicting the position in pixels relative to the closest offset parent

Both offset() and position() can only be used for visible elements.

In addition to element positioning, jQuery gives you the ability to get and set the scroll bar position of an element. Table 5.2 describes these methods that work with both visible and hidden elements.

Table 5.2. The jQuery scroll bar control methods

Method	Description
scrollLeft()	Returns the horizontal position of the scroll bar of the first matched element. The value returned is of type Number unless the jQuery object is empty, in which case null is returned. If a number is returned, it refers to the value of the position in pixels.
scrollLeft(value)	Sets the horizontal position of the scroll bar for all matched elements of value pixels. This method returns the jQuery set it has been called upon.
scrollTop()	Same as scrollLeft() except it returns the vertical position of the scroll bar of the first matched element.
scrollTop(value)	Same as scrollLeft(value) except the value is used to set the vertical position of the scroll bar for all the matched elements.

Now that you’ve learned how to get and set the horizontal and vertical position of the scroll bar of elements using jQuery, let’s see an example.

Imagine that you have an element with an ID of elem shown in the middle of your page and that after one second you want to move it to the top-left corner of the document. The point we’ve described has as its coordinates [0, 0], which means that to move it there you have to set both left and top to 0. To achieve the goal just described, all you need is these few lines of code:

setTimeout(function() {
   $('#elem').offset({

      left: 0,
      top: 0
   });
}, 1000);

Let’s now discuss different ways of modifying an element’s contents.