HTML DOM Window Scroll() Method

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Supported Browsers:

  • Google Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.