Window pageYOffset Property - Javascript Browser Object Model

Javascript examples for Browser Object Model:Window pageYOffset

  1. HOME
  2. Javascript
  3. Browser Object Model
  4. Window pageYOffset

Description

The pageYOffset property returns the pixels the current document has been scrolled from the upper left corner of the window, vertically.

The pageXOffset and pageYOffset properties are equal to the scrollX and scrollY properties.

These properties are read-only.

Return Value

A Number, representing the number of pixels that the document has already been scrolled from the upper left corner of the window, vertically

The following code shows how to Scroll the content by 100 pixels, and alert the pageXOffset and pageYOffset:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {//from ww  w. j av  a  2 s.com
    border: 1px solid black;
    background-color: lightblue;
    height: 2000px;
    width: 2000px;
}
</style>
</head>
<body>

<button onclick="myFunction()" style="position:fixed;">Click me to scroll</button><br><br>

<div>
</div>

<script>
function myFunction() {
    window.scrollBy(100, 100);

    if (window.pageXOffset !== undefined) {
        console.log("Horizontal scroll: " + window.pageXOffset
        + ", Vertical scroll: " + window.pageYOffset);
    } else {
        // IE9 and earlier
        console.log("Horizontal scroll: " + document.documentElement.scrollLeft + ", Vertical scroll: " + document.documentElement.scrollTop);
    }
}
</script>

</body>
</html>

Related Tutorials