HTML | DOM scrollIntoView() Method - GeeksforGeeks

18 Nov, 2019
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.
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:
<!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>
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:
<!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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
HTTP headers | Content-Type
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript