Javascript Browser Window pageXOffset and pageYOffset Property with scrollLeft and scrollTop

Introduction

Click the button to scroll the document window by 100px horizontally and vertically.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*from ww  w  .j  a v  a2s  .c  om*/
  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>

<p id="demo"></p>


<div>
</div>

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

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

</body>
</html>



PreviousNext

Related