Às vezes, queremos rolar automaticamente para o final da página com JavaScript.

Neste artigo, veremos como rolar automaticamente para a parte inferior da página com JavaScript.

O Método window.scrollTo

Podemos usar o window.scrollTométodo para rolar até o final da página.

Por exemplo, podemos escrever o seguinte HTML:

<div>
</div>

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
window.scrollTo(0, document.body.scrollHeight);

Em seguida, criamos alguns p elementos com createElemente os anexamos ao div com appendChild.

Em seguida, chamamos window.scrollTocom as coordenadas xey para rolar respectivamente.

document.body.scrollHeight é a altura do elemento do corpo e, portanto, rolamos para a parte inferior.

Se nosso contêiner de rolagem não for o elemento do corpo, também podemos obter o scrollHeightde qualquer elemento que desejarmos.

Por exemplo, podemos escrever:

const div = document.querySelector('div')

for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
window.scrollTo(0, div.scrollHeight);

E obtemos o mesmo efeito de rolagem de antes.

O método scrollIntoView

Podemos usar o scrollIntoViewmétodo para rolar a tela até o elemento em que ele é chamado.

Por exemplo, podemos escrever:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  p.id = `el-${i}`
  div.appendChild(p)
}
document.querySelector('#el-99')
  .scrollIntoView(false);

O argumento indica se queremos rolar para o topo do elemento ou não.

Uma vez que é false, não estamos rolando para o topo do elemento.

Além disso, podemos alterar o comportamento de rolagem escrevendo:

const div = document.querySelector('div')
for (let i = 0; i < 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  p.id = `el-${i}`
  div.appendChild(p)
}
document.querySelector('#el-99')
  .scrollIntoView({
    behavior: 'smooth'
  });

E assim obtemos uma rolagem suave como resultado.

Conclusão

Podemos usar JavaScript para rolar para a parte inferior da página automaticamente.

Podemos rolar para a parte inferior do contêiner de rolagem diretamente ou podemos rolar para um elemento na parte inferior da página.

Mais conteúdo em plainenglish.io