Como Adicionar um Efeito de Rolagem Suave para o Topo no WordPress Usando jQuery

Já rolou um post longo de blog do WordPress ou uma página de produto no seu celular, apenas para perceber que precisava deslizar tudo de volta para encontrar o menu? Seus visitantes podem sentir o mesmo.

Em páginas mais longas, essa pequena inconveniência pode rapidamente se transformar em frustração. E alguns podem simplesmente sair do seu site WordPress em vez de voltar.

Um botão suave de rolar para o topo pode ajudar você a corrigir isso instantaneamente. Esse recurso oferece aos leitores uma maneira rápida de voltar para cima, o que pode mantê-los engajados e incentivá-los a explorar mais do seu site.

Neste guia, compartilharemos exatamente como adicionar um efeito suave de rolar para o topo no WordPress usando jQuery. Não se preocupe, é mais simples do que você imagina! 💡

O que é Rolagem Suave e Quando Usá-la?

Rolagem suave é um efeito de navegação que move a página para cima ou para baixo em um movimento constante e fluido, em vez de saltar instantaneamente para uma seção. Você deve usá-la quando quiser oferecer aos usuários uma maneira menos brusca de navegar em páginas longas, especialmente para recursos como botões "voltar ao topo".

A menos que o site tenha um menu de navegação fixo, os usuários que rolam até o final de um post ou página longa do WordPress precisam deslizar ou rolar manualmente de volta para o topo para navegar no site.

Isso pode ser um verdadeiro incômodo e, muitas vezes, os usuários simplesmente apertarão o botão de voltar e sairão. É por isso que você precisa de um botão para enviar rapidamente os usuários para o topo do post ou página.

Normalmente, você pode adicionar essa funcionalidade como um simples link de texto sem usar jQuery, assim:

<a href="#" title="Back to top">^Top</a>

Isso enviará os usuários para o topo, rolando toda a página em milissegundos. Funciona, mas o efeito pode ser chocante, meio que quando você bate em um buraco na estrada.

Um scroll suave é o oposto disso. Ele deslizará o usuário de volta para o topo com um efeito visualmente agradável. Usar elementos como este pode drasticamente melhorar a experiência do usuário em seu site.

Com isso em mente, compartilharemos dois métodos para adicionar um efeito suave de scroll para o topo em seu site WordPress usando um plugin e jQuery. Aqui está uma visão geral rápida de todas as coisas que abordaremos neste guia:

• Dica 1: Adicionando um Efeito Suave de Scroll para o Topo Usando um Plugin do WordPress (Fácil)
• Dica 2: Adicionando Efeito Suave de Scroll para o Topo com jQuery no WordPress (Avançado)
• Dica Bônus: Outros Efeitos Sutis de Animação para Manter os Visitantes Engajados
• FAQs: Adicionando um Efeito de Scroll para o Topo no WordPress Usando jQuery
• Leitura Adicional: Mais Recursos Sobre Temas do WordPress

Sem mais delongas, vamos começar com o primeiro método.

Adicionando um Efeito Suave de Scroll para o Topo Usando um Plugin do WordPress

Este método é recomendado para iniciantes, pois permite que você adicione um efeito de scroll para o topo a um site WordPress sem tocar em uma única linha de código.

A primeira coisa que você precisará fazer é instalar e ativar o plugin WPFront Scroll Top. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você pode ir em Configurações » Scroll Top no seu painel do WordPress. Aqui, você pode configurar o plugin e personalizar o efeito de rolagem suave.

A partir daqui, a primeira coisa que você precisará fazer é clicar na caixa de seleção ‘Ativado’ para ativar o botão de rolagem para o topo 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 fade, a duração da rolagem e muito mais.

Se você rolar para baixo, encontrará mais opções, como editar o tempo de ocultação automática e ativar a opção de ocultar o botão em dispositivos pequenos ou na tela do wp-admin.

Você também pode editar o que o botão faz quando você clica nele. Por padrão, ele rolará para o topo da página, mas você pode alterá-lo para rolar para um elemento específico na postagem ou até mesmo linkar para uma página.

Além disso, você pode ajustar a localização do botão. Embora ele normalmente apareça no canto inferior direito da tela, você tem a opção de movê-lo para qualquer outro canto.

O plugin WPFront Scroll Top oferece filtros para exibir o botão de rolagem para o topo apenas em páginas selecionadas.

Normalmente, ele aparecerá em todas as páginas do seu blog WordPress.

No entanto, você pode navegar até a seção ‘Exibir em Páginas’ e escolher onde deseja exibir o efeito de rolagem para o topo.

O plugin também oferece designs de botões pré-fabricados. Você deve ser capaz de encontrar facilmente um design que combine com seu site.

Se você não conseguir encontrar um botão de imagem pré-fabricado que funcione para você, há uma opção para fazer upload de uma imagem personalizada da biblioteca de mídia do WordPress.

Quando terminar, basta clicar no botão ‘Salvar Alterações’.

Agora você pode visitar seu site WordPress para ver o botão de rolagem para o topo em ação.

Adicionando Efeito de Rolagem Suave para o Topo com jQuery no WordPress

Antes de começarmos, observe que este método não é recomendado para iniciantes. É adequado para pessoas que se sentem confortáveis em editar temas, pois inclui a adição de código ao seu site.

Para adicionar o efeito de rolagem suave para o topo, usaremos jQuery, um pouco de CSS e uma única linha de código HTML no seu tema WordPress.

Primeiro, vamos abrir um editor de texto como o Bloco de Notas e criar um arquivo. Salve-o como smoothscroll.js.

Em seguida, você precisará copiar e colar este 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;
		});
});

Este 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.

Depois disso, você pode salvar o arquivo e carregá-lo na pasta /js/ no diretório do seu tema WordPress.

Para mais detalhes, consulte nosso guia sobre como usar FTP para fazer upload de arquivos para o WordPress.

Se o seu tema não tiver um diretório /js/, você pode criar um e carregar o smoothscroll.js nele.

Você também pode ver nosso guia sobre a estrutura de arquivos e diretórios do WordPress para mais informações.

A próxima coisa que você precisa fazer é carregar o arquivo smoothscroll.js no seu tema.

Para fazer isso, vamos enfileirar o script no WordPress simplesmente copiando e colando este código no arquivo functions.php do seu tema.

No entanto, não recomendamos editar diretamente os arquivos do tema, pois o menor erro pode quebrar seu site.

Em vez disso, você pode usar um plugin como o WPCode, o melhor plugin de snippets de código para WordPress, e seguir nosso tutorial sobre como adicionar snippets de código personalizados no WordPress:

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), '',  true );

O código acima diz ao WordPress para carregar nosso script e a biblioteca jQuery, já que nosso plugin depende deles.

Agora que adicionamos o jQuery, vamos adicionar um link real ao nosso site WordPress que leva os usuários de volta ao topo.

Para fazer isso, basta colar este HTML em qualquer lugar do arquivo footer.php do seu tema usando o WPCode.

<a href="#top" id="smoothup" title="Back to top"></a>

Se precisar de ajuda, consulte nosso tutorial sobre como adicionar código de cabeçalho e rodapé no WordPress

Você pode ter notado que o código HTML inclui um link, mas nenhum texto âncora. Isso ocorre porque 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. Simplesmente adicione o CSS personalizado abaixo à folha de estilo do seu tema.

Neste 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 um 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 fazer o upload do seu próprio ícone de imagem usando o uploader de mídia do WordPress, copiar o URL da imagem e, em seguida, colá-lo no código.

E é basicamente isso!

Dica Bônus: Outros Efeitos Sutis de Animação para Manter os Visitantes Engajados

Um botão suave de rolar para o topo é apenas uma maneira de tornar seu site mais amigável. Existem muitos outros pequenos efeitos de animação que você pode adicionar para direcionar suavemente a atenção e tornar a navegação em seu site uma experiência sem esforço.

Por exemplo, um efeito parallax faz com que as imagens de fundo se movam em uma velocidade diferente do seu conteúdo, criando uma sensação de profundidade e movimento.

É uma maneira simples de fazer suas páginas parecerem mais vivas. Para instruções passo a passo, veja nosso guia sobre como adicionar um efeito parallax.

Um efeito de alternância de pesquisa mantém as coisas organizadas, mostrando a barra de pesquisa apenas quando alguém clica no ícone. Isso ajuda seu design a parecer menos poluído, ao mesmo tempo em que facilita para os visitantes encontrarem o que precisam.

Se o seu tema ainda não tiver isso integrado, plugins como o WPCode podem ajudar. Para mais detalhes, confira nosso guia sobre como adicionar um efeito de alternância de pesquisa no WordPress.

E se você tiver uma galeria de imagens, um efeito lightbox permite que as pessoas vejam fotos em um pop-up maior e sem distrações, sem sair da página. É um pequeno detalhe, mas faz uma grande diferença para quem adora explorar seus visuais.

Além disso, plugins de galeria como o Envira Gallery facilitam a adição desse recurso. Para fazer isso, você pode consultar nosso guia sobre como adicionar uma galeria no WordPress com efeito de lightbox.

Esses toques não são apenas "agradáveis de ter"; eles mostram aos visitantes que você pensou na experiência deles. Isso pode torná-los mais propensos a permanecer e explorar. 🕵️

FAQs: Adicionando um Efeito de Rolagem para o Topo no WordPress Usando jQuery

Antes de terminarmos, aqui estão algumas perguntas comuns que os leitores têm sobre como adicionar um botão de rolagem para o topo no WordPress.

Um botão de rolagem para o topo é necessário para todos os sites?

Nem sempre. Mas é uma adição inteligente para páginas com muito conteúdo. Em posts de blog longos ou tutoriais, ele poupa os visitantes do incômodo de rolar tudo de volta para cima, o que torna a experiência de navegação deles mais agradável.

Adicionar um botão de rolagem para o topo vai deixar meu site mais lento?

Não deveria. O método de plugin é leve e otimizado para desempenho, e o trecho de código jQuery é minúsculo. Portanto, não terá nenhum impacto perceptível na velocidade do seu site.

Onde é o melhor lugar para colocar o botão de rolar para o topo?

A maioria dos sites o coloca no canto inferior direito da tela. Esse local o mantém visível e de fácil acesso sem distrair o conteúdo principal.

Posso usar um link de texto em vez de uma imagem para o meu botão?

Com certeza. Tanto o método de plugin quanto o de código personalizado podem ser configurados com um simples link de texto “Voltar ao Topo” em vez de um ícone. O plugin oferece essa opção pronta para uso, e com o método de código, você apenas ajusta o HTML e o CSS para combinar com seu estilo.

Leitura Adicional: Mais Recursos Sobre Temas do WordPress

Esperamos que este artigo tenha ajudado você a adicionar um efeito suave de rolar para o topo em seu site usando jQuery. Quer se aprofundar em temas do WordPress? Estes recursos irão ajudá-lo:

• Temas WordPress Mais Populares e Melhores
• O Que Acontece Quando Você Troca Seu Tema do WordPress?
• Coisas que VOCÊ DEVE FAZER Antes de Mudar Temas do WordPress
• O Que É um Framework de Tema do WordPress e Quais São os Melhores Frameworks de Tema?
• Como Personalizar Seu Tema do WordPress
• Como Encontrar Quais Arquivos Editar em um Tema WordPress
• Como Usar o Personalizador de Temas do WordPress Como um Profissional
• Um Guia Completo para Iniciantes sobre Edição de Site Completo no WordPress

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.