Como adicionar um botão Sticky Back-to-Top ao seu site

Publicados: 2023-02-12

Todos nós já estivemos lá. Você encontrou um guia on-line fantástico, rolou até o fim e pensou: "Uau, adoraria ver o que mais este site tem a oferecer!"

Mas então você tem que rolar.

TODOS.

O.

CAMINHO.

PARA.

O.

PRINCIPAL.

E aí você pensa…. "Hmmm, deixa pra lá." E feche a página.

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

O que é um botão fixo Voltar ao topo?

Também conhecido como botão de rolagem para o topo ou imagem para o topo, o botão fixo de voltar 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 de interface do usuário comum é colocar esse botão no canto inferior direito da tela, tornando-o “fixo” por meio de uma posição fixa para que esteja sempre acessível conforme o usuário rola a página.

Coisas a considerar antes de adicionar um botão Voltar 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 traseiro preciso seguir?

Aqui estão algumas perguntas a serem respondidas antes de criar seu botão de rolagem para o topo:

  • Onde será colocado?
  • Quão grande (ou pequeno) deve ser?
  • Quais padrões de design você deve seguir para permanecer na marca? (Pense em cores, fontes, ícones, etc.)
  • Corre o risco de cobrir conteúdo importante do site, como informações em uma barra lateral?
  • O que acontece em dispositivos móveis? Será responsivo?
  • Você realmente precisa dele?*

*Observação: você poderia argumentar que os usuários hoje estão condicionados a rolar para baixo (e para cima!) em uma página, o que eliminaria a “necessidade” de um botão 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 recomendada” a seguir é aquela baseada em dados de seu próprio site e usuários!

Como adicionar um botão Sticky Back-to-Top ao seu site WordPress

Neste tutorial, mostrarei como adicionar exatamente o botão voltar ao topo que usamos aqui no Layout! A única diferença é que colocamos o nosso em um cabeçalho fixo 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 ativo. Se você precisar configurar um rapidamente, confira o Local, um aplicativo local gratuito do WordPress que é incrivelmente fácil de usar.

Ou confira este tutorial em vídeo sobre como adicionar um botão fixo de voltar ao topo!

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

Para este tutorial de botão fixo de voltar ao topo, 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 “funcionar” e definir os comportamentos do botão

No HTML, você encontrará as seguintes linhas:

 <a class="top-link hide" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Voltar ao início</span>
</a>

Este será o seu botão fixo de voltar ao topo! Você pode ver que adicionamos uma classe CSS chamada .top-link e estamos usando um pouco de 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 ficará pixelado em diferentes tamanhos de tela, como uma imagem rasterizada.
  2. Os SVGs são universalmente suportados em todos os navegadores. (Sim, 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">Voltar ao início</span>

Isso é crítico 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 botão de rolagem para cima!)

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

 .top-link {
  transição: todos os 0,25s com facilidade de entrada e saída;
  posição: fixa;
  inferior: 0;
  direita: 0;
  display: flex em linha;
  
 cursor: ponteiro;
 itens de alinhamento: centro;
 justificar-conteúdo: centro;
 margem: 0 3em 3em 0;
 raio da borda: 50%;
 preenchimento: 0,25em;
 largura: 80px;
 altura: 80px;
 cor de fundo: #F8F8F8;

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

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

Em seguida, você verá 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.

 .mostrar {
    visibilidade: visível;
    opacidade: 1;
  }
  
  .esconder {
    visibilidade: oculta;
    opacidade: 0;
  }

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

 svg {
 preenchimento: #000;
 largura: 24px;
 altura: 12px;
}
&:flutuar {
 cor de fundo: #E8E8E8;
 	svg {
	 preenchimento: #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 início” para os leitores de tela.

 // Texto destinado apenas para leitores de tela.
.texto do leitor de tela {
	posição: absoluta;
	caminho de recorte: inserção(50%);
	margem: -1px;
	borda: 0;
	preenchimento: 0;
	largura: 1px;
	altura: 1px;
	estouro: oculto;
	quebra automática de linha: normal !importante;
	clipe: rect(1px, 1px, 1px, 1px);
	&:foco {
		exibição: bloco;
		topo: 5px;
		esquerda: 5px;
		índice z: 100000; // Acima da barra de ferramentas do WP
		caminho do clipe: nenhum;
		cor de fundo: #eee;
		preenchimento: 15px 23px 14px;
		largura: automático;
		altura: automático;
		decoração de texto: nenhum;
		altura da linha: normal;
		cor: #444;
		tamanho da fonte: 1em;
		clipe: auto !importante;
	}
}

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

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

 // Defina uma variável para nosso elemento de botão.
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 = () => {
  // Obtém o valor de rolagem atual
  deixe y = window.scrollY;
  
  // Se o valor do scroll for maior que a altura da janela, vamos adicionar uma classe ao botão scroll-to-top para mostrá-lo!
  se (y > 0) {
    scrollToTopButton.className = "exibição do link superior";
  } outro {
    scrollToTopButton.className = "ocultar link superior";
  }
};

Também adicionaremos um ouvinte de evento, que observará a rolagem do usuário (para sabermos 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, criaremos uma variável para o número de pixels que estamos do topo da página. Se esse número for maior que 0, a função o redefinirá para 0, levando-nos ao topo!

Também adicionaremos um pouco de animação aqui, para que o salto não seja muito repentino.

 const scrollToTop = () => {
  // Vamos definir uma variável para o número de pixels que estamos do topo do documento.
  const c = document.documentElement.scrollTop || documento.corpo.scrollTop;
  
  // Se esse número for maior que 0, rolaremos de volta para 0 ou para o início do documento.
  // Também animaremos esse scroll com requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  se (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo recebe uma coordenada x e ay.
    // Aumente o valor '10' para obter uma rolagem mais suave/lenta!
    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 fixo de voltar ao topo.

 // Quando o botão for clicado, execute nossa função ScrolltoTop acima!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  role para cima();
}

É isso! Agora você terá um botão back-to-top totalmente funcional e personalizável em seu site WordPress.