HTML | DOM scrollIntoView() Method

The scrollIntoView() method scrolls the specified element into the visible area of the browser window.

Syntax:

document.getElementById("id").scrollIntoView(alignTo);

Parameters:



  • alignTo: It is a Boolean type parameter containing true or false value. The default value is set to true.
    • true: Scroll the element to the top of its window.
    • false: Scroll the element to the bottom of its window.

    Note that the underlying terminology is not ‘top’ or ‘bottom’, I’ll get into that in the next section.
    So, it’s just like hovering through elements in the respective window with a button assigned with specific coordinates of the window or an element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        #element {
            height: 200px;
            width: 350px;
            overflow: auto;
            background: green;
        }
          
        #content1 {
            margin: 500px;
            height: 100px;
            width: 1000px;
            background-color: white;
        }
          
        #content2 {
            margin: 500px;
            height: 50px;
            width: 1000px;
            background-color: grey;
        }
          
        #content3 {
            margin: 500px;
            height: 150px;
            width: 1000px;
            background-color: coral;
        }
    </style>
    <script>
        function myFunction1() {
            var e = document.getElementById("content1");
            e.scrollIntoView(false); // Makes the element 
        }
  
        function myFunction2() {
            var e = document.getElementById("content2");
            e.scrollIntoView(true);
        }
  
        function myFunction3() {
            var e = document.getElementById("content3");
            e.scrollIntoView(); // Default is true
        }
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <button onclick="myFunction1()">Scroll to element-1</button>
        <br>
        <button onclick="myFunction2()">Scroll to element-2</button>
        <br>
        <button onclick="myFunction3()">Scroll to element-3</button>
        <br>
        <br>
  
        <div id="element">
            <h2 style="color: white">
              Click on the scroll button to see
              that elements in a click.</h2>
            <div id="content1">
                <h2 align="left">Element-1</h2>
            </div>
            <div id="content2">
                <h2 align="left">Element-2</h2>
            </div>
            <div id="content3">
                <h2 align="left">Element-3</h2>
            </div>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:

So, in the above, the shift between the items is not being done smooth, it’s just jumping between elements.
To make it look cool, object arguments comes in handy for this use.

Syntax:

document.getElementById("id").scrollIntoView({
  behavior: smooth | auto;
  block: start | center | end | nearest;
  inline: start | center | end | nearest;
});

The behavior object determines the smoothness of the scroll has two modes ‘smooth’ and ‘auto’.
The block object determines at which part of the block the element view should get started.
The inline object determines at which alignment of the element should the view start.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        #element {
            height: 200px;
            width: 350px;
            overflow: auto;
            background: green;
        }
          
        #content1 {
            margin: 500px;
            height: 100px;
            width: 1000px;
            background-color: white;
        }
          
        #content2 {
            margin: 500px;
            height: 50px;
            width: 1000px;
            background-color: grey;
        }
    </style>
    <script>
        function myFunction1() {
            var e = document.getElementById("content1");
            e.scrollIntoView({
                block: 'start',
                behavior: 'smooth',
                inline: 'start'
            });
        }
  
        function myFunction2() {
            var e = document.getElementById("content2");
  
            // Ends the block to the window 
            // Bottom and aligns the view to the center 
            e.scrollIntoView({
                block: 'end',
                behavior: 'smooth',
                inline: 'center'
            });
        }
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <button onclick="myFunction1()">
          Scroll to element-1
      </button>
        <br>
        <button onclick="myFunction2()">
          Scroll to element-2
      </button>
        <br>
        <br>
        <br>
  
        <div id="element">
            <h2 style="color: white">
              Click on the scroll button to 
              see that elements in a click.
          </h2>
            <div id="content1">
                <h2 align="left">Element-1 aligned to start</h2>
            </div>
            <div id="content2">
                <h2>Element-2 aligned to center</h2>
            </div>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:




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.