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:
elem.scrollIntoView(true);
And now scroll the window so that the element is at the bottom of the window:
elem.scrollIntoView(false);
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.