Francileudo Oliveira
Francileudo Oliveira12/10/2022 09:09
Compartilhe

Voltar ao topo da página usando JavaScript

  • #HTML
  • #JavaScript

Olá, seja muito bem vindo(a), no artigo de hoje nós iremos criar um botão simples que ao ser clicado nos leva ao topo da tela usando o JavaScript. Porque isso é bom? Não teremos um id como âncora para nos levar ao topo da página. 

Inicialmente você precisa fazer uma tag button no HTML, com um onClick apontando para a função que vai estar no JavaScript, dessa forma:

<button onclick="scrollToTop()">Topo</button>

A estilização do botão é com você, o nome que eu coloquei na função foi ScrollToTop. No nosso JavaScript iremos fazer uma const para armazenar a nossa arrow function, dentro dela colocamos o método window.scrollTo() que vai fazer a rolagem para determinado ponto da página.

Dentro do window.scrollTop() vamos passar, entre chaves, o ponto que no caso seria o topo da nossa página, o topo inicial de uma página é zero. Por fim, adicionamos o comportamento dessa rolagem para que ela fique suave aos olhos do usuário.

const scrollToTop = () => {
 window.scrollTo({
top: 0,
behavior: 'smooth'
 })
}

Dessa forma temos o nosso botão de voltar ao topo usando JavaScript, com menos de dez linhas, que tal experimentar no seu próximo projeto? Um abraço e até a próxima.

Publicação Original: https://francileudo-frontend.blogspot.com/2022/10/voltar-ao-topo-da-pagina-usando.html

Compartilhe
Comentários (0)