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