.scrollTop() JQ Home  <<  A & P  <<  .scrollTop()

First element vertical scroll bar position retrieval and matched set vertical scroll bar position setting.

Description

The .scrollTop() method is used to retrieve the current vertical position of the scroll bar for the first element within the matched set or set the current vertical position of the scroll bar for each element within the matched set.

  • The vertical scroll position equates to the number of pixels that are hidden from view to the top of the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.
  • This method will not work if the element(s) it is being applied to are hidden and being called directly, or animated as a property, using .animate().

Syntax

Signature Description
.scrollTop() Retrieve the current vertical position of the scroll bar for the first element within the matched set.
.scrollTop( value ) Set the current vertical position of the scroll bar of each element within the matched set.

Parameters

Parameter Description Type
valueAn integer representing the new horizontal position of the scroll bar to set.Number

Return

Retrieving - A Number object (an integer).

Setting - A jQuery object.

.scrollTop() Example A & P  <<  Top

Retrieve the current vertical position of the scroll bar for the first element within the matched set.

In the example below when we press the button we get the current vertical position of the scroll bar within the 'iframe' below. Scroll the vertical scroll bar and press the button again to see the position change.





$(function(){
  $('#btn15').on('click', function() {
    alert($('#ourIframe').contents()
                         .scrollTop() + ' is the current vertical scroll position.');  
  });
});

Press the button below to action the above code:

.scrollTop( value ) Example A & P  <<  Top

Set the current vertical position of the scroll bar of each element within the matched set.

In the example below when we press the button we set the current vertical position of the scroll bar within the 'iframe' below to 100 pixels. Scroll the vertical scroll bar and press the button again to see the position change.





$(function(){
  $('#btn16').on('click', function() {
    alert($('#ourIframe2').contents()
                          .scrollTop( 100 ) 
                          + ' current vertical scroll position set to 100 pixels.');  
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 11 - Working With Dimension & Position CSS Properties