Rodrigo Brito

Botão de retorno ao topo de forma descomplicada

Há várias tedências de UX design que são úteis dependendo do propósito a se chegar em uma página.

Estava a um tempo definindo uma alternativa de permitir ao usuário um retorno rápido ao menu do site. Poderia optar por um menu fixo, uma das tendências atuais, mas, sobretudo em dispositivos mobile, o espaço ocupado pelo menu pode ser algo significativo. Pensei em um botão, no final da página.

Este botão pode ser realizado de diversas página, até mesmo com css com o href apontando para um id no menu. Contudo, optei pelo JS, para poder realizar uma transição suave, bem como controlar o momento do surgimento do botão.

O código é bem simples e o resultado pode ser visto na página deste post rolando para baixo (nessa altura já deve estar visível)!

No html precisamos somente de uma div com um span, que será o botão, com suas classes atribuídas. Coloquei no final da minha página após o footer para que não seja visível no carregamento da página em caso de lentidão no carregamento.

O código é o seguinte:

HTML

CSS

A maior carga de código está no css. Dividi em duas partes, mas não há nada de engenhoso. Posição fixa no bottom, inicialmente oculto, com o z-index acima de todos os elementos. Há um triângulo em css no after da classe smoothscroll-top para simbolizar a seta, que pode ser substituído por uma imagem ou um ícone.

JavaScript

O JS vai atribuir a classe show ao botão, que vai o tornar visível após scroll vertical passar de 100. O clique no botão ativa o retorno ao topo, de forma suavizada com o valor "smooth" na propriedade behavior do método scroll de window.

O código, somente em JavaScript é o seguinte:

O resultado final é o seguinte:

Neste site, no lugar do código em JS, utilizei o jQuery para executar também um efeito de pulo na página, utilizando o método animate, com o código abaixo: