tadam logo
Did you find an error in the text?
Select this with mouse and press
Ctrl + Enter
Xhtml.co.il Check Spelling
Orphus system

scrollTop()

Contents:

.scrollTop()

Returns: Integer

Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements.

.scrollTop()

version added: 1.2.6

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

Examples

Get scrollTop
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
The output of the code above will be:
Full source:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
  });
  </script>
  <style>
  p { margin:10px;padding:5px;border:2px solid #666; }
  </style>
</head>
<body>
  <p>Hello</p><p></p>
</body>
</html>

.scrollTop( value )

Returns: jQuery

Description: Set the current vertical position of the scroll bar for each of the set of matched elements.

.scrollTop( value )

version added: 1.2.6
value
An integer indicating the new position to set the scroll bar to.

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the scrollTop positions the vertical scroll of each matched element.

Examples

Get scrollTop
$("div.demo").scrollTop(300);
The output of the code above will be:
Full source:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("div.demo").scrollTop(300);
  });
  </script>
  <style>
div.demo {background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
  p { margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
  </style>
</head>
<body>
  <div class="demo"><h1>lalala</h1><p>Hello</p></div>
</body>
</html>
Was this information helpful?
   

Comments