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.

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