Como adicionar um botão back-to-top pegajoso ao seu site

Todos nós já estivemos lá. Você encontrou um guia online fantástico, rolou tudo até o final e depois pensou: “Uau, eu adoraria ver o que mais este site tem a oferecer!”

Mas então você tem que rolar.

TUDO.

A.

CAMINHO.

PARA.

A.

TOPO.

E aí você pensa…. “Hum, deixa pra lá.” E feche a página.

Como web designer, esta é a última coisa que você quer que alguém faça quando chegar em um site que você está construindo. Felizmente, o ano é 2019 e as melhores práticas modernas de web design nos deram a solução para esse problema comum de UX: o botão de voltar ao topo.

O que é um botão de retorno ao topo?

Também conhecido como botão de rolagem para o topo ou imagem go-to-top, o botão de retorno ao topo é um elemento de navegação útil que ajuda os usuários a voltar ao início da página da Web que estão visualizando. Um padrão comum de interface do usuário é colocar esse botão no canto inferior direito da tela, tornando-o “fixo” por meio de uma posição fixa, de modo que esteja sempre acessível à medida que o usuário rola a página para baixo.

Coisas a considerar antes de adicionar um botão de retorno ao topo

Como qualquer tendência de design popular, eu encorajo você a dar um passo para trás antes de implementá-la em seu site para se perguntar: Se eu vou construir isso, quais diretrizes de botão de retorno eu preciso seguir?

*Nota: Você pode argumentar que os usuários hoje estão condicionados a rolar para baixo (e voltar para cima!) em uma página, o que eliminaria a “necessidade” de um botão de voltar ao topo. Meu conselho: teste! Adicione um evento do Google Analytics ao clicar ou use uma ferramenta de mapa de calor como o Hotjar para ver como os visitantes do seu site interagem com a página.

A melhor “prática” a seguir é aquela baseada em dados de seu próprio site e usuários!

Como adicionar um botão back-to-top pegajoso ao seu site WordPress

Neste tutorial, mostrarei como adicionar o botão back-to-top exato que usamos aqui no Layout! A única diferença é que colocamos o nosso em um cabeçalho adesivo na parte superior da tela, em vez do canto inferior direito. (Mas não se preocupe, é o mesmo conceito!)

Dica profissional: Embora este tutorial não seja muito avançado, ainda recomendo experimentá-lo em um site de teste ou ambiente local, para que não haja absolutamente nenhum risco para o seu site ao vivo. Se você precisar configurar um rápido, confira o Local, um aplicativo WordPress local gratuito que é incrivelmente fácil de usar.

Vamos começar! Vou percorrer cada etapa do processo, e você também pode seguir este Codepen do próprio engenheiro de front-end do Flywheel, Josh Masen.

Veja o botão Pen ES6 Scroll-to-top de Josh Lawler (@joshuamasen) no CodePen.

Para este tutorial de botão back-to-top, usaremos três idiomas:

• HTML para a marcação para criar o botão
• CSS para estilizar o botão e fazer com que ele corresponda à sua marca
• JavaScript para fazê-lo “funcionar” e definir os comportamentos do botão

No HTML, você encontrará as seguintes linhas:

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

Este será o seu botão de voltar ao topo! Você pode ver que adicionamos uma classe CSS chamada .top-link e estamos usando um JavaScript simples para “fazer funcionar”. Também estamos usando um SVG in-line para o botão.

Além de um SVG, você também pode usar um arquivo de imagem ou ícone de fonte para criar o botão. No entanto, preferimos o método SVG porque:

1. Ele não será pixelado em diferentes tamanhos de tela, como uma imagem raster.
2. SVGs são universalmente suportados em navegadores. (Oba, experiência do usuário!)
3. É fácil estilizar com CSS, então você pode mudar tudo com muita facilidade.
4. Leva apenas uma linha de código, tornando-o leve e melhor para o desempenho do site.

A última parte realmente importante que você encontrará no HTML é esta linha:

<span class="screen-reader-text">Back to top</span>

Isso é fundamental para usuários que operam com leitores de tela e melhorará a acessibilidade do seu site WordPress. (Pense nisso como uma tag alt para uma imagem, mas para o seu botão de rolagem para o topo!)

Agora vamos falar mais sobre essa classe CSS, .top-link . Estamos usando isso para realmente estilizar o botão, e é onde você definirá qualidades como o tamanho, quanto preenchimento deve ser ao redor, a cor etc.

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

Nota: Estamos usando Sass (uma linguagem de folha de estilo), para escrever nosso CSS um pouco mais rápido. Saiba mais sobre este pré-processador aqui.

Algumas partes importantes deste trecho: transition: all .25s ease-in-out ; controla o quão “rápido” seu botão irá aparecer ou desaparecer na tela, e position: fixed ; é o que faz o botão “grudar” no local desejado.

Em seguida, você verá as regras para .show e .hide . Usaremos JavaScript para alternar entre essas classes para informar ao navegador quando o botão deve (ou não) aparecer na página.

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

Antes de entrarmos no JavaScript, há apenas mais algumas linhas que adicionaremos ao CSS.

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

Essas classes estilizarão a imagem SVG para a própria seta e informarão ao navegador como exibir o botão quando um usuário passar o mouse sobre ele.

Por fim, adicionaremos um pouco de CSS para ocultar o texto que diz “voltar ao topo” para leitores de tela.

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

Agora vamos ao JavaScript! Faremos isso sem carregar jQuery, o que ajudará a manter seu código leve e rápido para carregar.

A primeira variável ajudará o navegador a encontrar o botão.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

Em seguida, criaremos uma função que mostra o botão de rolagem para cima se o usuário rolar além da altura da janela inicial.

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

Também adicionaremos um ouvinte de eventos, que observará enquanto o usuário rola (para que saibamos onde ele está na página).

window.addEventListener("scroll", scrollFunc);

Quase pronto! Em seguida, precisamos definir a função que faz com que o botão realmente leve o usuário de volta ao topo da página. Para fazer isso, vamos criar uma variável para o número de pixels que estamos no topo da página. Se esse número for maior que 0, a função o definirá de volta para 0, levando-nos ao topo!

Também adicionaremos uma pequena animação aqui, para que o salto não seja muito repentino.

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

Por último, mas não menos importante, só precisamos dizer à página para executar essa função quando alguém clicar em nosso botão voltar ao topo.

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Próximo: Descubra os 19 plugins do WordPress que os desenvolvedores adoram

Baixe este e-book para obter uma lista dos nossos plugins mais recomendados para desenvolvedores! Descobrimos que todos esses plug-ins são fáceis de usar, não têm um desempenho muito pesado em seu site e são totalmente confiáveis.

É isso! Agora você terá um botão de retorno ao topo totalmente funcional e personalizável em seu site WordPress. Para ver todo o tutorial em ação, lembre-se de conferir este Codepen do próprio engenheiro de front-end do Flywheel, Josh Masen!