Como instalar botão Voltar ao topo com SVG

Faz muito tempo desde que atualizei a postagem aqui, talvez por causa de atividades offline e, quando estava online, verifiquei apenas o modelo do Blogger .

Nestas dicas do Blogger, a Arlina Design compartilhará dicas sobre como instalar o botão Voltar ao topo com o SVG

Talvez você já conheça a função principal do botão Voltar ao topo, que facilita aos visitantes do blog retornar instantaneamente ao topo sem precisar rolar as páginas manualmente; certamente isso ajudará bastante os visitantes ao abrir uma página com conteúdo longo do artigo para retornar instantaneamente ao menu principal.

Para aqueles que estão curiosos sobre como instalá-lo em um blog, siga as etapas abaixo.

Como instalar o botão Voltar ao topo com SVG

Primeiro, abra o Blogger > Clique no menu Temas e no botão Editar HTML > Adicione este código antes </head>

CSS<style>
/* Back To Top */
.backtotop{display:none;background:#3c6382;color:#fff;font-size:1.4em;width:40px;height:40px;line-height:40px;outline:0;z-index:999;bottom:20px;right:20px;position:fixed;border-radius:5px;padding:0;text-align:center;cursor:pointer;opacity:1;transition:all .25s}.backtotop svg{width:24px;height:24px;transform:rotate(90deg);vertical-align:middle;transition:all .25s}.backtotop:hover{background:#0a3d62}
</style>

Em seguida, adicione o código abaixo antes

JS<div class='backtotop hide'><svg viewBox='0 0 24 24'>
  <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff'/>
</svg></div>
<script>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},400),!1})});
//]]>
</script>

Em seguida, clique no botão Salvar tema e veja os resultados em seu blog.

Isso é tudo !Como instalar o botão Voltar ao topo com SVG da Mais Templates ,espero que seja útil para o meu amigo.