image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Francileudo Oliveira
Francileudo Oliveira13/10/2022 08:37
Compartilhe

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

  • #HTML
  • #JavaScript
  • #CSS

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

Compartilhe
Comentários (1)

AM

Adão Martins - 13/10/2022 15:11

Boa amigo! Tava precisando disso!


Muito obrigado!