Inserindo um botão para voltar ao topo
Neste artigo veremos como inserir um botão para voltar ao topo da página. Esta facilidade dá ao usuário maior comodidade na navegação e permite que ele retorne ao topo e selecione outras opções dentro do menu ou mesmo visualize algo que está no início da pagina.
As instruções a seguir levam em consideração que seu projeto possui o jQuery inserido no seu header. Caso ainda não possua, insira-o antes de continuar.
Primeiro vamos inserir um link em nosso HTML que será nosso botão. ele pode ficar localizado em qualquer parte de seu <body> mas recomendo deixá-lo bem ao final da página (no caso do WordPress dentro do footer.php).
<a href=”#” class=”voltar-ao-topo”>Voltar ao topo</a>
A classe que utilizarei neste tutorial pode ser modificada caso queira, mas lembre-se de alterar em todos os trechos de código que iremos desenvolver. Após a inserção deste link, em seu site deve aparecer algo como:
Voltar ao topo
Agora vamos acrescentar algum CSS para estilizar e dar aparência de um botão. Acrescente em seu arquivo style.css ou onde considerar adequado (sinta-se à vontade para personalizar de acordo com as cores de seu projeto):
.voltar-ao-topo {
position: fixed;
bottom: 2em;
right: 2em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
display: none;
}
.voltar-ao-topo:hover {
background-color: rgba(0, 0, 0, 0.6);
}
Neste ponto, seu link vai sumir de seu template, pois o deixamos oculto por padrão nas propriedades de CSS. Caso queira visualizar o botão antes de continuar, remova a propriedade display:none e ele será exibido assim:
Volte a propriedade para ocultar o botão e vamos continuar. Veremos agora o código javascript responsável pelo site voltar ao topo. Este código deve ser inserido no rodapé do site ou dentro do ultimo arquivo de scripts carregados no site. (Recomendo deixar no footer.php no caso do WordPress)
jQuery(document).ready(function() {
// Exibe ou oculta o botão
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 200) {
jQuery('.voltar-ao-topo').fadeIn(200);
} else {
jQuery('.voltar-ao-topo').fadeOut(200);
}
});
// Faz animação para subir
jQuery('.voltar-ao-topo').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, 300);
})
});
O primeiro trecho do código exibe ou oculta o botão baseado no scroll da tela. Como por padrão ele está oculto, será exibido depois do usuário rolar a tela por mais de 200 pixels. Caso o usuário suba novamente para menos de 200px do topo, o botão é ocultado.
No segundo trecho do código, ele é acionado quando clicamos no link que possui a classe .voltar-ao-topo e faz com que o site vá até o topo com animação de 300 milisegundos.
A esta altura, seu site deverá exibir o botão para voltar ao topo. Caso não esteja, verifique o console de erros de seu navegador e corrija os possíveis erros. O mais comum é: falta de importação do jQuery. Lembre-se de adicioná-lo ao header de seu projeto.
Você pode usar também uma imagem, basta inserir a imagem no lugar do texto do link.
Dúvidas? Deixe sua mensagem, comente abaixo ou faça contato via facebook.