5

Gostaria de saber como implementar no javascript puro a mesma ação utilizada com jQuery abaixo:

$('html, body').animate({
   scrollTop: 500
}, 300);

Alguém sabe me dizer como ficaria o código?

1 Resposta 1

6

Usando window.scroll, assim:

window.scroll({top: 500, left: 0, behavior: 'smooth' })

p {height: 40px; vertical-align: middel; border: solid 1px}
<h1>Rolar o html até o final...</h1>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>para encher a página...</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>
<p>.....</p>

<input type='button' onclick="window.scroll({top: 500, left: 0, behavior: 'smooth' })" value="clique aqui para executar o scroll" />

Para complementar, esse recurso chama-se "Smooth Scrolling", e é documentado no W3C: https://www.w3.org/TR/cssom-view-1/#smooth-scrolling

5

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .