In this section, we will learn what the Element scrollIntoView() method is and how to use it in JavaScript.

What is Element scrollIntoView() Method in JavaScript?

The JavaScript Element scrollIntoView() method is used to bring an element that is hidden (for example, because the document is larger than the display device) into view so that users can see it.

For example, you might have a large document (larger than your display device) and now a specific element of that document is below or above the viewable display and hence it is hidden.

So in such cases, we can get a reference to that hidden element and invoke this method on it. After that, the element will appear on the viewable part of the display device so that users can see now.

Element scrollIntoView() Method Syntax:

element.scrollIntoView(booleanValue);

Element scrollIntoView() Method Parameter

The method takes one argument and that is a boolean value.

The value true means the top of the element will be aligned to the top of the visible area of the scrollable ancestor

The value false means the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor.

If omitted, it will scroll to the top of the element.

Element scrollIntoView() Method Return Value

The method does not return a value.

Example: using scrollIntoView() method in JavaScript

See the Pen using scrollIntoView() method in JavaScript by Omid Dehghan (@odchan1) on CodePen.