Метод для прокрутки окна к элементу в JavaScript

Метод scrollIntoView прокручивает окно к заданному элементу. Метод применяется к элементу, к которому следует прокрутить окно. Параметром метода регулируют, где должен оказаться элемент: сверху окна или снизу.

Давайте посмотрим на примерах. Прокрутим окно так, чтобы элемент был сверху окна:

elem.scrollIntoView(true);

А теперь прокрутим окно так, чтобы элемент был снизу окна:

elem.scrollIntoView(false);

Можно также параметром передать объект с настройками. Давайте плавно прокрутим окно к элементу:

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

Объект с настройками имеет также настройки выравнивания страницы по отношению к элементу. Настройка block задает вертикальное выравнивание, а настройка inline - горизонтальное. Они могут принимать следующие значения: 'start', 'center', 'end', 'nearest'.

Давайте попробуем:

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

Дан элемент и кнопка. По нажатию на кнопку прокрутите страницу к данному элементу. Опробуйте все описанные возможности.