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.

PreviousBanner Rotativo NextBotões Quantidade

Last updated 6 months ago