Botão "Voltar para o topo"
Snippet para criar um botão para voltar ao topo do site
<a href="#top">
<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24" data-name="Layer 1"><path d="M17.71,11.29l-5-5a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-5,5a1,1,0,0,0,1.42,1.42L11,9.41V17a1,1,0,0,0,2,0V9.41l3.29,3.3a1,1,0,0,0,1.42,0A1,1,0,0,0,17.71,11.29Z"/></svg>
</a>a[href="#top"]{
padding: 10px;
position: fixed;
top: 90%;
right: 40px;
display: none;
transition: ease-in-out .2s;
}
a[href="#top"]:hover{
opacity: .8;
}jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() > 100) {
jQuery('a[href="#top"]').fadeIn();
} else {
jQuery('a[href="#top"]').fadeOut();
}
});
jQuery('a[href="#top"]').click(function(){
jQuery('html, body').animate({scrollTop : 0},800);
return false;
});
}); Como usar
Insira o bloco de código HTML no arquivo layouts/default.html antes do fechamento da tag <body>
Insira o bloco de código CSS em sua folha de estilo
Insira o bloco de código Javascript em seu arquivo .js.
Last updated
Was this helpful?