Hello! Tudo bem friends? Hoje eu vou ensinar como fazer um botão "Voltar ao Topo" sem imagem.
Clique em Leia Mais para ver o tutorial completo.
Vá em Modelo > Editar HTML, aperte CRTL + F e digite na caixa:
<head>
Abaixo de <head> coloque esse código:
<style>
#BotãoVoltarAoTopo {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: 1px solid #b3ccff; /* Borda, retire se quiser*/
outline: none;
background-color: #b3d7ff; /* Cor de fundo do botão*/
color: #fff; /* Cor da fonte*/
cursor: pointer;
padding: 15px;
border-radius: 10px; /* Bordas arredondadas, retire se quiser*/
}
#BotãoVoltarAoTopo:hover {
background-color: #cc99ff; /* Cor de fundo do botão em hover*/
border: 1px solid #dd99ff; /* Borda em hover, retire se quiser*/
}
</style>
Agora pesquise por:
</head>
Abaixo coloque o seguinte:
<button onclick="topFunction()" id="BotãoVoltarAoTopo" title="Voltar ao Topo">Voltar ao Topo</button>
Onde está a vermelho você pode mudar o texto.
Finalmente, abaixo do último código coloque este:
<script>
// Quando o usuário desliza para baixo 20px da parte superior do documento, mostre o botão
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("BotãoVoltarAoTopo").style.display = "block";
} else {
document.getElementById("BotãoVoltarAoTopo").style.display = "none";
}
}
// Quando o usuário clica no botão, vá até ao topo do documento
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
Salve e prontinho! O botão já está instalado no seu layout!
Goodbye!