jQuery scrollTop()

.scrollTop()

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

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.

Example : Get the scrollTop of a paragraph.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<p>Hello</p><p></p>
<script>
var p = $( "p:first" );
$( "p:last" ).text( "scrollTop:" + p.scrollTop() );
</script>
</body>
</html>

Example : Set the scrollTop of a div.

<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    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>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
<script>
$( "div.demo" ).scrollTop( 300 );
</script>
</body>
</html>

.scrollTop()

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

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.

Example : Get the scrollTop of a paragraph.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<p>Hello</p><p></p>
<script>
var p = $( "p:first" );
$( "p:last" ).text( "scrollTop:" + p.scrollTop() );
</script>
</body>
</html>

Example : Set the scrollTop of a div.

<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #666;
    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>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
<script>
$( "div.demo" ).scrollTop( 300 );
</script>
</body>
</html>