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.

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>

Output

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 −

raja
Published on 01-Oct-2019 14:57:09
Advertisements