Deseja adicionar um efeito de rolagem suave até a parte superior da página em seu site do WordPress?
Um efeito de rolagem para o topo é ótimo quando você tem uma página longa e deseja oferecer aos seus usuários uma maneira fácil de voltar ao topo. Ele ajuda a melhorar a experiência do usuário no seu site.
Neste artigo, mostraremos como adicionar um efeito de rolagem suave até o topo no WordPress usando jQuery e um plug-in.
O que é o Smooth Scroll e quando você deve usá-lo?
A menos que o site tenha um menu de cabeçalho fixo, os usuários que rolam para a parte inferior de uma página ou publicação longa do WordPress precisam deslizar ou rolar manualmente de volta para o topo para navegar no site.
Isso pode ser realmente irritante e, muitas vezes, os usuários simplesmente clicam no botão Voltar e vão embora. É por isso que você precisa de um botão que envie rapidamente os usuários para a parte superior da página.
Você pode adicionar essa funcionalidade como um simples link de texto sem usar o jQuery, como este:
<a href="#" title="Back to top">^Top</a>
Isso enviará os usuários para o topo, rolando a página inteira para cima em milissegundos. Funciona, mas o efeito pode ser chocante, como quando você bate em um obstáculo na estrada.
A rolagem suave é o oposto disso. Ele deslizará o usuário de volta para o topo com um efeito visualmente agradável. O uso de elementos como esse pode melhorar drasticamente a experiência do usuário em seu site.
Dito isso, vamos ver como você pode adicionar um efeito de rolagem suave até o topo usando um plug-in do WordPress e jQuery.
Como adicionar um efeito de rolagem suave até o topo usando um plug-in do WordPress
Esse método é recomendado para iniciantes, pois você pode adicionar um efeito de rolagem para cima a um site do WordPress sem tocar em uma única linha de código.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in WPFront Scroll Top. Se precisar de ajuda, consulte nosso guia sobre como instalar um plug-in do WordPress.
Após a ativação, você pode ir para Settings ” Scroll Top no painel do WordPress. Aqui você pode configurar o plug-in e personalizar o efeito de rolagem suave.
Primeiro, você precisará clicar na caixa de seleção “Enabled” (Ativado) para ativar o botão de rolagem para cima em seu site. Em seguida, você verá opções para editar o deslocamento da rolagem, o tamanho do botão, a opacidade, a duração do esmaecimento, a duração da rolagem e muito mais.
Se você rolar a tela para baixo, encontrará mais opções, como editar o tempo de ocultação automática, ativar a opção de ocultar o botão em dispositivos pequenos e ocultá-lo na tela wp-admin.
Você também pode editar o que o botão faz quando você clica nele. Por padrão, ele rola para a parte superior da página, mas você pode alterá-lo para rolar para um elemento específico na postagem ou até mesmo vincular a uma página.
Há também uma opção para alterar o local do botão. Por padrão, ele aparecerá no canto inferior direito da tela, mas você também pode optar por movê-lo para qualquer um dos outros cantos.
O plug-in WPFront Scroll Top também oferece filtros para mostrar o botão de rolagem para cima somente em páginas selecionadas.
Normalmente, ele aparecerá em todas as páginas do seu blog do WordPress. No entanto, você pode navegar até a seção “Display on Pages” e escolher onde deseja exibir o efeito de rolagem para o topo.
O plug-in também oferece designs de botões pré-criados que você pode escolher. Você deve conseguir encontrar facilmente um design que combine com seu site.
Se não conseguir encontrar um botão de imagem pré-criado que funcione para você, há uma opção para carregar uma imagem personalizada da biblioteca de mídia do WordPress.
Quando terminar, basta clicar no botão “Save Changes” (Salvar alterações).
Agora você pode visitar seu site para ver o botão de rolagem para cima em ação.
Adicionando o efeito de rolagem suave até o topo com jQuery no WordPress
Esse método não é recomendado para iniciantes. Ele é adequado para pessoas que se sentem à vontade para editar temas, pois inclui a adição de código ao seu site.
Usaremos jQuery, algumas CSS e uma única linha de código HTML em seu tema do WordPress para adicionar o efeito de rolagem suave no topo.
Primeiro, abra um editor de texto como o Bloco de Notas e crie um arquivo. Vá em frente e salve-o como smoothscroll.js.
Em seguida, você precisará copiar e colar esse código no arquivo:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} else {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('click', function(){
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});
Depois disso, você pode salvar o arquivo e enviá-lo para a pasta /js/ no diretório do tema do WordPress. Para obter mais detalhes, consulte nosso guia sobre como usar o FTP para fazer upload de arquivos no WordPress.
Se o seu tema não tiver um diretório /js/, você poderá criar um e carregar o smoothscroll.js nele. Para obter mais informações, consulte também nosso guia sobre a estrutura de arquivos e diretórios do WordPress.
Esse código é o script jQuery que adicionará um efeito de rolagem suave a um botão que leva os usuários à parte superior da página.
A próxima coisa que você precisa fazer é carregar o arquivo smoothscroll.js em seu tema. Para fazer isso, vamos enfileirar o script no WordPress.
Depois disso, basta copiar e colar esse código no arquivo functions.php do seu tema. Não recomendamos editar diretamente os arquivos do tema porque o menor erro pode danificar seu site. Em vez disso, você pode usar um plugin como o WPCode e seguir nosso tutorial sobre como adicionar trechos de código personalizados no WordPress.
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '', true );
No código acima, dissemos ao WordPress para carregar nosso script e também a biblioteca jQuery, pois nosso plug-in depende dela.
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. Basta colar esse HTML em qualquer lugar do arquivo footer.php do seu tema. Se precisar de ajuda, consulte nosso tutorial sobre como adicionar código de cabeçalho e rodapé no WordPress.
<a href="#top" id="smoothup" title="Back to top"></a>
Você deve ter notado que o código HTML inclui um link, mas nenhum texto âncora. Isso se deve ao fato de que usaremos um ícone de imagem com uma seta para cima para exibir um botão de voltar ao topo.
Neste exemplo, estamos usando um ícone de 40x40px. Basta adicionar o CSS personalizado abaixo à folha de estilo do seu tema.
Nesse código, estamos usando um ícone de imagem como imagem de fundo do botão e definindo-o em uma posição fixa. Também adicionamos uma pequena animação CSS, que gira o botão quando o usuário passa o mouse sobre ele.
#smoothup {
height: 40px;
width: 40px;
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
display:none;
background: url("https://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
}
#smoothup:hover {
-webkit-transform: rotate(360deg) }
background: url('') no-repeat;
}
No CSS acima, certifique-se de substituir https://www.example.com/wp-content/uploads/2013/07/top_icon.png pelo URL da imagem que você deseja usar. Você pode carregar seu próprio ícone de imagem usando o carregador de mídia do WordPress, copiar o URL da imagem e colá-lo no código.
Esperamos que este artigo tenha ajudado você a adicionar um efeito de rolagem suave para o topo em seu site usando jQuery. Talvez você também queira ver nossa seleção especializada dos melhores plug-ins do WordPress para pequenas empresas e nosso guia passo a passo sobre como iniciar uma loja on-line.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Previously, I didn’t have a ‘back to top’ button on the page, but as my articles became longer and longer, I didn’t want users to spend several seconds scrolling. I started using this exact plugin, and it’s fantastic. It significantly enhances user comfort, even though at first glance it might seem unnecessary. It isn’t.
Asha says
Thank you very much! This is very clearly explained. Helpful.
Marco says
The Jquery method didn’t work for me using a Twenty-seventeen child theme. Oh well. The hyperlink version did work perfectly, thankfully, and it’s good enough for me.
Marco says
One question…could one reason why this is not working for me (the jquery method) be because my WordPress installation is in a subfolder? It’s the only reason I can think of.
Taffeltrast says
Would love this, but it break the footer.php. The footer simply does not load.
When i try ad it to footer.php i get “There is a syntax error on line 14. etc etc”, and when i try upload it anyway, the footer does not load.
oliver says
thanks a lot, simple and effective.
my two cents, if you allready have a custom.js file in your theme you can simply add the jquery function in this file instead of creating a new file and enqueue again.
Personnally i prefer to have all my small scripts in one file.
Stuart says
Child Theme Designed by Blank |
<?php }
add_action('wp_head', 'my_favicon');
What am I doing wrong ? This is my funtions.php new to wp_enqueue_scripts.
Stuart says
Twenty Fifteen-Child Theme made a Js folder added all the wp_enqueue_script but no dice not sure what went wrong. I want to use less plugins as possible they seem to slow WordPress sites down. Added A favicon perfect wp_enqueue_script kind of new to me. Any help?
Donald says
Hi, does this still work? The icon appears (if I temporarily change the CSS to display:block), the script shows up as loaded in the Firefoxe developers’ toolbox console. However I get the following error message for line 1:
‘SyntaxError: missing ; before statement’
I’ve copied the script as above:
01 jQuery(document).ready(function($){
02 $(window).scroll(function(){
03 if ($(this).scrollTop() < 200) {
04 $('#smoothup') .fadeOut();
05 } else {
06 $('#smoothup') .fadeIn();
07 }
08 });
09 $('#smoothup').on('click', function(){
10 $('html, body').animate({scrollTop:0}, 'fast');
11 return false;
12 });
13 });
Can anyone see what the problem might be?
Donald
Josh Patterson says
Is there any way to make this fade out before it gets to the bottom of the page?
jaybob says
Hi, its working fine. Thank you for the tutorial but i only have just one problem, the image appears to quick. can i do something to appear later / a little bit down, after scrolling?
Aaron says
This is a very clean way to pull this off. By far my favorite I’ve found.
Quick question… I have put it in my footer.php file… How can I get it to stop sticking at a certain point? For example, I have a footer that is 575px tall and I don’t want the icon going into that area. Basically stop the fixed position at say, 600px from the bottom of the page.
Ulv says
Would this solution add the smoothscroll.js file to the portion of the html file or…?
emanuele says
Hi,
is possible to add smooth scroll in menu for scroll page?…i have create a one page template and i want to scroll it by menu…thank you
StefsterNYC says
If I understand you correctly you want to add it to the main menu nav? Correct? Simply use the same selector name but change the css completely. So that the image won’t appear.
Make sense?
Paul says
Thanks à lot for this tip ! However I’ve got a problem. When I reduce the size of the screen, my arrow go away while I want it in a specific place.
Is there a way to fix that ?
Thanks
Paul
Paul says
I found a solution for my problem. I just had to change my css to :
#smoothup {
top: 572px;
left: auto;
margin-left: -68px;
}
Mushir says
Thank you man! works like magic.. you really made my day!
Steven Wolock says
Thanks for this! It works great.
Question: Is that closed bracket correct after -webkit-transform: rotate(360deg)?
etech0 says
I set this up on my site, but I don’t see the icon! How can I find out why it’s not working?
Thanks!
WPBeginner Support says
There could be any possible reasons. First make sure you have uploaded the image, then check that the background: url has the correct URL and that it leads to your image. Lastly check that jquery and your .js file is loaded. Lastly, try tweaking CSS values for display, position, and text-indent.
Administrador
etech0 says
I figured it out – I had to change the 40px height and width to conform with my image.
Thanks for a great tutorial!
Alexander Gruzov says
Thanks!