HTML Window pageYOffset Property

HTML Web Development Front End Technology

The HTML Window pageYOffset property returns the value in pixel the current document has been scrolled vertically from the left corner.

Syntax

Following is the syntax −

window.pageYOffset

Let us see an example of HTML Window pageYOffset Property −

Example

Live Demo

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .box {
      width: 1000px;
      height: 1000px;
      background: teal;
      color: #fff;
      font-size: 1.5rem;
      text-align: left;
      padding: 20px;
   }
</style>
<body>
<h1>HTML Window pageYOffset Property Demo</h1>
<button onclick="scrollFn()" class="btn">Scroll</button>
<button onclick="display()" class="btn">Show pageYOffset value</button>
<div class="box"></div>
<script>
   function display() {
      document.querySelector('.box').innerHTML = 'The value of pageYOffset is: ' + window.pageYOffset + 'px';
   }
   function scrollFn() {
      window.scrollBy(0, 10);
   }
</script>
</body>
</html>