JavaScript scrollIntoView

The scrollIntoView method is a function belonging to the Element class in JavaScript, which enables the scrolling of an element into the visible area of the window.

In this segment, we will explore how to utilize the scrollIntoView method to bring elements into the viewport. Additionally, we will demonstrate an example that illustrates the functionality and application of this method.

JavaScript scrollIntoView Method

The scrollIntoView function is utilized for adjusting the scroll position of elements within the viewport.

Syntax:

Example


1) element.scrollIntoView (alignToTop);

2) Element.scrollIntoView (options);

In the above-described syntaxes, the specified parameters are:

✅ alignToTop: The parameter alignToTop contains the Boolean value that can be either true or false, and by default, its value is set to true. For a particular code, if this parameter finds it true, as a result, the top of the element gets aligned either to the top of the visible area or to the top of the viewport area. However, in case the value is set to false; as a result, the bottom of the element gets aligned either to the bottom of the viewport or to the bottom of the visible area of the scroll bar.
✅ options: It is an object-type argument, and the browser support may vary. This parameter provides more control for the alignment of the element in the view. It has the following properties: The first property is the behavio r that defines the transition animation. The property can have any of the two values, i.e., auto or smooth , where the default value is auto . The block property is another which defines the vertical alignment of the elements and can have any of the four value, i.e. , start, center, end or nearest . Here, the default value is start . The last property is the inline property which defines the horizontal alignment and can have any of the four values, i.e., start, center, end , or nearest . Here, the default value is nearest .
✅ The first property is the behavio r that defines the transition animation. The property can have any of the two values, i.e., auto or smooth , where the default value is auto .
✅ The block property is another which defines the vertical alignment of the elements and can have any of the four value, i.e. , start, center, end or nearest . Here, the default value is start .
✅ The last property is the inline property which defines the horizontal alignment and can have any of the four values, i.e., start, center, end , or nearest . Here, the default value is nearest .

Next, we will examine an instance of the scrollIntoView function.

JavaScript scrollIntoView Example

To illustrate the functionality of the JavaScript scrollIntoView method, let’s consider an example:

Example


<!DOCTYPE html>

<html>

<body>

  <button onclick="funcClick()">Click it</button>

    <div>

      <p>Result: The Best Learning Portal</p>

      <ul>

      <li><b>JavaScript</b></li>

      <li><b>Java</b></li>

      <li><b>PHP</b></li>

      <li><b>C</b></li>

      <li><b>C++</b></li>

      <li><b>Python</b></li>

      <li><b>R</b></li>

      <li><b>GO</b></li>

      <li><b>DOT NET</b></li>

      <li id="id_test"><b>Angular</b></li>

      <li><b>Django</b></li>

      <li><b>HTML</b></li>

      <li><b>CSS</b></li>

      <li><b>Bootstrap</b></li>

      <li><b>C#</b></li>

      <li><b>Android</b></li>

      <li><b>SQL</b></li>

      <li><b>DBMS</b></li>

      <li><b>Data Structure</b></li>

      <li><b>RPA</b></li>

      <li><b>PostgreSQL</b></li>

      <li><b>Artificial Intelligence</b></li>

      <li><b>Machine Learning</b></li>

      <li><b>AWS</b></li>

      <li><b>Data Science</b></li>

      <li><b>Blockchain</b></li>

      <li><b>Git</b></li>

      <li><b>DevOps</b></li>

      <li><b>ReactJS</b></li>

      <li><b>Hadoop</b></li>

      <li><b>Cloud</b></li>

      <li><b>Data Mining</b></li>

      <li><b>Oracle</b></li>

      <li><b>MYSQL</b></li>

      <li><b>SQLite</b></li>

      <li><b>jQuery</b></li>

      <li><b>Node js</b></li>

      <li><b>JSON</b></li>

      <li><b>Laravel</b></li>

      <li><b>Wordpress</b></li>

      <li><b>JSP</b></li>

      <li><b>JSF</b></li>

      <li><b>Spring Boot</b></li>

      <li><b>Rest API</b></li>

      <li><b>MicroServices</b></li>

      <li><b>IntelliJ</b></li>

      <li><b>Apache Kafka</b></li>

      <li><b>Cassandra</b></li>

      <li><b>Selenium</b></li>

      <li><b>SO on...</b></li>



    </ul>

  </div>

<script>

    function funcClick()

    {

      var e = document.getElementById("id_test");

      e.scrollIntoView();

    }

  </script>

</body>

</html>

Upon clicking the button a single time, the resultant output was as follows:

In the output, it is evident that the list items are not visible within the viewport initially without scrolling. These items become visible only after the button is pressed, which triggers the scrolling action to bring the list items into view.

Code Explanation:

✅ The above code is an html file that consists of both html and JavaScript code.
✅ We have created a list of items, and in between the items, we have created an id =id_test so that we can get our scrolling point from where the window will get scrolled.
✅ Next, we have created a button 'Click it' on which we have invoked the function when the user makes a click.
✅ As the function is the JS function, so as per the function definition, the particular list of items will be fetched, and it will be stored in the specified variable.
✅ When we use the scrolIntoView property, the windows get scrolled to the particular list item.
✅ Finally, the item will be visible in the viewport.

The scrollIntoView function in JavaScript serves the purpose of revealing sections of content that are not currently visible by simply adjusting the scroll bar. Additionally, there are various alternative approaches to utilize the JavaScript scrollIntoView method.

JavaScript scrollIntoView Method

JavaScript scrollIntoView Example

Input Required