HTML Window screenTop Property

HTML Web Development Front End Technology

The HTML Window screenTop property returns the vertical coordinates of the window relative to the screen. It is not supported by firefox browser.

Syntax

Following is the syntax −

window.screenTop

Let us see an example of HTML Window screenTop 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%);
      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;
   }
   .show {
      font-size: 1.2rem;
   }
</style>
<body>
<h1>HTML Window screenTop Property Demo</h1>
<button onclick="display()" class="btn">Show screenTop value</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector('.show').innerHTML = 'The vertical coordinate of the window relative to the screen is: ' + window.screenTop + 'px';
   }
</script>
</body>
</html>

Output

Click on “Show screenTop value” button to display the vertical coordinate of the window relative to the screen:

AmitDiwan

Updated on: 01-Oct-2019

132 Views

Kickstart Your Career

Get certified by completing the course

Get Started