Element scrollTop Property - Javascript DOM

Javascript examples for DOM:Element scrollTop

  1. HOME
  2. Javascript
  3. DOM
  4. Element scrollTop

Description

The scrollTop property sets or gets the number of pixels to scroll an element vertically.

Set the scrollTop property with the following Values

Value Description
pixels Sets the number of pixels to scroll the element vertically.

If the element cannot be scrolled, "0" is returned

If the number is greater than the maximum allowed scroll amount, the maximum allowed scroll amount is returned

Return Value

A Number, representing the number of pixels that the element's content has scrolled vertically

The following code shows how to get the number of pixels the content of a <div> element is scrolled horizontally and vertically:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
body {/* www  . j  a  v a2 s. c o  m*/
    height: 2000px;
    width: 2000px;
}

button {
    position: fixed;
}
</style>
</head>
<body>

<button onclick="myFunction()">Scroll contents of body</button><br><br>

<script>
function myFunction() {
    var body = document.body; // For Chrome, Safari and Opera
    var html = document.documentElement; // Firefox and IE 
    body.scrollLeft += 30;
    body.scrollTop += 10;
    html.scrollLeft += 30;
    html.scrollTop += 10;

    console.log(body.scrollTop);
    console.log(html.scrollTop);

}
</script>

</body>
</html>

Related Tutorials