.scrollTop()S2C Home « Attributes & Properties « .scrollTop()

• <<    .scrollLeft()
• .width()     >>

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

Parameters

Return

Retrieving - A Number object (an integer).

Setting - A jQuery object.

.scrollTop() ExampleTop

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.');  
  });
});

.scrollTop( value ) ExampleTop

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.');  
  });
});

• <<    .scrollLeft()
• .width()     >>