Botão Voltar ao Topo Deslizante no WordPress sem Plugin

botão voltar ao topo

Colocar um botão para poltar ao topo no WordPress não precisa de plugin. Veja como é fácil.

1 – Abra o arquivo footer.php do seu tema e cole o código abaixo no final do arquivo antes da tag </body>.
Onde está o valor 100 é a altura em pixel que o botão vai aparecer quando você rolar a tela para baixo.

<a id="subirTopo" class="voltar-ao-topo">^</a>

<script type="text/javascript">
   jQuery(document).ready(function(){
      jQuery("#subirTopo").hide();
      
      Query('a#subirTopo').click(function () {
          jQuery('body,html').animate({
              scrollTop: 0
          }, 800);
          return false;
      });
      jQuery(window).scroll(function () {
         if (jQuery(this).scrollTop() > 100) {
            jQuery('#subirTopo').fadeIn();
         } else {
            jQuery('#subirTopo').fadeOut();
         }
      });
    });
 </script>

2 – Depois No CSS personalizado do tema cole o código abaixo.

/* Botão Voltar ao Topo /
.voltar-ao-topo {
   background-color: rgba(0, 0, 0, 0.6);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
   border-radius: 2px;
   color: #FFF;
   font-size: 30px;
   font-weight: bold;
   cursor: pointer;
   height: 35px;
   padding: 0px 10px 40px 10px;
   position: fixed;
   bottom: 30px;
   right: 12px;
   text-align: center;
   width: 40px;
   z-index: 999;
}
.voltar-ao-topo:hover {
   background: #fa5742;
   color: #fff;
}

E pronto. Personalize o CSS a vontade se quiser.

Esse código funciona em qualquer página HTML basta carregar a biblioteca jquery.js

No WordPress caso queira usar um plugin, eu testei o WPFront Scroll Top e funcionou perfeitamente.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *