Method for scrolling a window to an element in JavaScript

The scrollIntoView method scrolls the window to the given element. The method is applied to the element to which the window should be scrolled. The parameter of the method controls where the element should appear: on the top of the window or at the bottom.

Let's look at examples. Now we scroll the window so that the element is on the top of the window:


And now scroll the window so that the element is at the bottom of the window:


You can also pass an object with settings as a parameter. Let's smoothly scroll the window to the element:

elem.scrollIntoView({ behavior: 'smooth', });

The object with settings also has settings of page alignment relative to the element. The block setting specifies vertical alignment, while the inline one specifies horizontal alignment. They can take the following values: 'start', 'center', 'end', 'nearest'.

Let's try it:

elem.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'end', });

Given an element and a button. By clicking on the button, scroll the page to this element. Try all the features described.