Método para rolar a janela até um elemento em JavaScript

O método scrollIntoView rola a janela até o elemento especificado. O método é aplicado ao elemento para o qual a janela deve ser rolada. O parâmetro do método controla onde o elemento deve ser posicionado: no topo ou na parte inferior da janela.

Vejamos alguns exemplos. Vamos rolar a janela para que o elemento fique no topo da janela:

elem.scrollIntoView(true);

E agora vamos rolar a janela para que o elemento fique na parte inferior da janela:

elem.scrollIntoView(false);

Também é possível passar um objeto com configurações como parâmetro. Vamos rolar a janela suavemente até o elemento:

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

O objeto de configurações também tem opções de alinhamento da página em relação ao elemento. A configuração block define o alinhamento vertical, e a configuração inline - o alinhamento horizontal. Elas podem aceitar os seguintes valores: 'start', 'center', 'end', 'nearest'.

Vamos experimentar:

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

Dado um elemento e um botão. Ao clicar no botão, role a página até este elemento. Experimente todas as funcionalidades descritas.