HTML Window pageYOffset Property

HTMLWeb DevelopmentFront End Technology

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


Following is the syntax −


Let us see an example of HTML Window pageYOffset Property −


 Live Demo

<!DOCTYPE html>
   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;
<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>
   function display() {
      document.querySelector('.box').innerHTML = 'The value of pageYOffset is: ' + window.pageYOffset + 'px';
   function scrollFn() {
      window.scrollBy(0, 10);


Click on “Show pageYOffset value” button to display the value of pageYOffset property:

Now click on “Scroll” button to scroll the page −

And then again click on “Show pageYOffset value” button to display the value of pageYOffset −

Published on 01-Oct-2019 11:27:09