Como adicionar rolagem suave para obter o melhor efeito no WordPress usando jQuery

Você já viu sites que adicionam rolagem suave ao topo da página? Isso é ótimo quando você tem uma página longa e deseja oferecer aos usuários uma maneira fácil de voltar ao início. Recentemente, um de nossos leitores nos perguntou sobre como adicionar rolagem suave ao efeito principal no WordPress. Neste artigo, mostraremos como adicionar rolagem suave para obter o melhor efeito no WordPress usando o jQuery.

Nota: Este tutorial foi criado para um usuário intermediário de bricolage que se sente confortável em editar seus temas. Se você deseja usar um método de plug-in, use a rolagem de página programável até o plug-in superior. Para aqueles que querem aprender como fazer isso sem um plug-in, continue lendo.

O que é rolagem suave e quando usá-la?

Role para o exemplo superior

Quando uma p√°gina ou postagem tem muito conte√ļdo, os usu√°rios s√£o for√ßados a rolar para baixo para ler esse conte√ļdo. √Ä medida que os usu√°rios rolam para baixo, todos os links de navega√ß√£o aumentam. Quando os usu√°rios terminam de ler esse artigo, devem rolar para cima para ver o que mais fazer no site. Rolar para o bot√£o superior envia rapidamente os usu√°rios para o topo da p√°gina. Voc√™ pode adicionar isso como um link de texto sem usar o jQuery, assim:

^ Topo

Ele simplesmente envia os usu√°rios para o topo da p√°gina e rola a p√°gina inteira em milissegundos. √Č funcional, mas √© como um sucesso na estrada. Rolagem suave √© o oposto disso. Deslize delicadamente o usu√°rio para o topo da p√°gina. Isso cria um efeito agrad√°vel e melhora a experi√™ncia do usu√°rio.

Adicione rolagem suave para obter o melhor efeito com o jQuery no WordPress

Para adicionar uma rolagem suave ao efeito superior, usaremos jQuery, algum CSS e uma √ļnica linha de c√≥digo HTML no seu tema WordPress. Primeiro, abra um editor de texto como o Bloco de Notas. Crie um arquivo e salve-o como smoothscroll.js. Copie e cole este c√≥digo no arquivo:

jQuery (documento) .ready (função ($) {
 $ (window) .scroll (function () {
         if ($ (this) .scrollTop ()

Salve o arquivo e faça o upload para a pasta / js / no diretório de temas do WordPress (consulte Como usar o FTP para fazer upload de arquivos para o WordPress). Se o seu tema não tiver um diretório / js /, crie um e carregue smoothscroll.js nele. Esse código é o script jQuery que adicionará um efeito de rolagem suave a um botão que leva os usuários ao topo da página.

A próxima coisa a fazer é adicionar smoothscroll.js ao seu tema. Para acertar, colocaremos o script no WordPress (saiba mais em nosso guia sobre como adicionar scripts corretamente no WordPress). Copie e cole esse código no arquivo functions.php do seu tema.

wp_enqueue_script ('suavização', get_template_directory_uri (). '/js/smoothscroll.js', array ('jquery'), '', true);

No código acima, dissemos ao WordPress para carregar nosso script e também para carregar a biblioteca jQuery, já que nosso plugin depende dele. Agora que adicionamos a parte do jQuery, vamos adicionar um link real ao nosso site WordPress que leva os usuários de volta ao topo. Cole esse HTML em qualquer lugar do arquivo footer.php do seu tema.

Como você observou, adicionamos um link, mas não o vinculamos a nenhum texto. Isso ocorre porque usaremos um ícone de imagem com uma seta para cima para exibir um botão voltar ao topo. Neste exemplo, estamos usando um ícone de 40x40px. Adicione isso à folha de estilos do seu tema.

#smoothup {
 altura: 40px;
 largura: 40 px;
 posição: fixa;
 inferior: 50px;
 direita: 100px;
 recuo do texto: -9999px;
 Mostrar nenhum;
 background: url ("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
 -webkit-transição-duration: 0.4s;
 -moz-transição-duration: 0.4s; duração da transição: 0.4s;
 }
 
 #smoothup: passe o mouse {
 -webkit-transform: rotate (360deg)}
 background: url ('') sem repetição;
 }

No CSS acima, usamos uma posição fixa para o ícone de imagem e usamos um ícone de imagem como imagem de fundo. Você pode fazer upload do seu ícone de imagem usando o carregador de mídia do WordPress e, em seguida, fazer com que o URL da imagem cole como o URL de segundo plano. Também adicionamos uma pequena animação CSS ao botão que gira quando o usuário passa o mouse sobre ela.

A rolagem para o efeito superior permite que os usu√°rios voltem ao in√≠cio e encontrem outras coisas para fazer no seu site. Outra coisa que voc√™ pode fazer √© adicionar uma barra de rodap√© flutuante como a que temos em nosso site para exibir o conte√ļdo em destaque. Se voc√™ n√£o deseja que seus usu√°rios rolem para compartilhar seu artigo, √© altamente recomend√°vel usar o plug-in flutuante para a barra de compartilhamento social, como fizemos no WPBeginner.

Esperamos que este artigo tenha ajudado a adicionar rolagem suave ao efeito da parte superior da página do seu site usando o jQuery. Para outros ótimos usos do jQuery no WordPress, você pode conferir o nosso artigo de perguntas frequentes sobre o acordeão do jQuery ou o artigo de imagens de carregamento lento

Voc√™ acha que a rolagem para o efeito superior √© √ļtil? Deixe-nos saber, deixando um coment√°rio abaixo.