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:

javascriptelem.scrollIntoView(true);

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

javascriptelem.scrollIntoView(false);

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

javascriptelem.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:

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