Skip to content
Related Articles

Related Articles

Improve Article

HTML DOM Window Scroll() Method

  • Last Updated : 29 Jul, 2020

The Window scroll() method scrolls the window to a particular place in the document. This method is different form scrollTo() method as it takes different parameters like scrolling behavior, etc using ScrolltoOptions Dictionary.

Syntax:

window.scroll(x-coord, y-coord)

Or

window.scroll(options)

Parameters:

  • x-coord: pixels along the horizontal axis of the document that you want to be scrolled to.
  • y-coord: pixels along the vertical axis of the document that you want to be scrolled to.
  • options: A ScrolltoOptions Dictionary.

Example 1: In this example, we will scroll using ScrolltoOptions Dictionary.






<!DOCTYPE HTML> 
<html>  
<head>
    <meta charset="UTF-8">
    <title>window scroll() method</title>
</head>   
  
<body style="text-align:center;">
    GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeksfor
GeeksGeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeksfor
GeeksGeeksforGeeks
  
    <h1 style="color:green;">  
     GeeksforGeeks
    </h1
    <p id="a"
    HTML | window scroll() method
    </p>
  
    <button onclick = "Geeks()">
    Click Here to Scroll
    </button>
    <script
        var a = document.getElementById("a");
        function Geeks(){
            window.scroll({
                top: 100,
                left: 100,
                behavior: 'smooth'
});
        }
  </script
</body>   
</html>

Output:

Example 2: In this example, we will scroll using coords.




<!DOCTYPE HTML> 
<html>  
<head>
    <meta charset="UTF-8">
    <title>window scroll() method</title>
</head>   
  
<body style="text-align:center;">
    GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeksfor
GeeksGeeksforGeeksGeeksforGeeksGeeksforGeeksGeeks
forGeeksGeeksforGeeksGeeksforGeeksGeeksforGeeks
GeeksforGeeksGeeksforGeeksGeeksforGeeksGeeksfor
GeeksGeeksforGeeks
  
    <h1 style="color:green;">  
     GeeksforGeeks
    </h1
    <p id="a"
    HTML | window scroll() method
    </p>
  
    <button onclick = "Geeks()">
    Click Here
    </button>
    <script
        var a = document.getElementById("a");
        function Geeks(){
            window.scroll(500, 0);
        }
  </script
</body>   
</html>

Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :