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)

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.

html

<!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.

html

<!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>