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?
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.
Add comment