Botão de voltar ao topo aparecendo com rolagem da página

Olá, seja muito bem vindo(a). No artigo de hoje iremos construir um botão de voltar ao topo que fica “invisível” na tela e aparece apenas quando o usuário estiver rolando a página, para que ele possa voltar para cima mais facilmente.

<a class="back-to-top" onclick="scrollToTop()">Topo</a>

Dentro do HTML precisamos de uma tag com uma classe e o onclick, no artigo anterior você terá o tutorial da função scrollToTop() que ensina a voltar ao topo da página usando javascript. 

No nosso CSS precisaremos colocar uma posição fixa no botão, que geralmente vai ser do lado direito da tela no canto inferior, deixamos a visibilidade hidden com opacidade 0 e por fim uma animação simples. Agora, precisamos deixar o botão visível quando a tag receber outra classe que chamamos de show.

.back-to-top {
 background: #fff;
 cursor: pointer;

 position: fixed;
 right: 1rem;
 bottom: 1rem;

 line-height: 0;

 visibility: hidden;
 opacity: 0;

 transition: 0.3s;
 transform: translateY(100%);
}

.back-to-top.show {
 visibility: visible;
 opacity: 1;
 transform: translateY(0);
}

Por fim, no nosso JavaScript vamos pegar a tag usando a classe com um querySelector e construir uma função para quando a rolagem da página for maior ou igual a 100 (significa que a página está sendo rolada pelo usuário) a nossa classe show seja colocada na tag do botão e ele fique visível. Agora, colocamos o JavaScript para verificar quando o usuário começa a rolagem com o window.addEventListener para ativar nossa função backToTop.

const backToTopButton = document.querySelector('.back-to-top')

const backToTop = () => {
 if (window.scrollY >= 100) {
backToTopButton.classList.add('show')
 } else {
backToTopButton.classList.remove('show')
 }
}

window.addEventListener('scroll', function () {
 backToTop()
})

Com isso, temos um botão de voltar ao topo que aparece quando o usuário rola a página, para que esse botão fique completo falta a função de voltar ao topo que você encontra nesse artigo: https://francileudo-frontend.blogspot.com/2022/10/voltar-ao-topo-da-pagina-usando.html. Um abraço e até a próxima.

Artigo Original: https://francileudo-frontend.blogspot.com/2022/10/botao-de-voltar-ao-topo-aparecendo-com.html