Como adicionar uma rolagem suave ao efeito superior no WordPress usando jQuery

Deseja adicionar um efeito de rolagem suave ao topo da página em seu site WordPress?

Um efeito de rolagem para o topo é ótimo quando você tem uma página longa e deseja oferecer aos usuários uma maneira fácil de voltar ao topo. Isso ajuda a melhorar a experiência do usuário do seu site.

Neste artigo, mostraremos como adicionar um efeito scroll-to-top suave no WordPress usando jQuery e um plugin.

O que é 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 até o final de uma longa página ou postagem do WordPress precisam deslizar manualmente ou rolar de volta ao topo para navegar no site.

Isso pode ser um verdadeiro aborrecimento, e muitas vezes os usuários simplesmente apertam o botão Voltar e saem. É por isso que você precisa de um botão que envie rapidamente os usuários para o topo da página.

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

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

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

A rolagem suave é o oposto disso. Ele deslizará o usuário de volta ao 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 uma rolagem suave ao efeito superior usando um plugin do WordPress e jQuery.

Como adicionar um efeito de rolagem suave para o topo usando um plug-in do WordPress

Esse método é recomendado para iniciantes, pois você pode adicionar um efeito de rolagem para o topo a um site WordPress sem tocar em uma única linha de código.

A primeira coisa que você precisa 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 para Configurações »Scroll Top do seu painel do WordPress. Aqui você pode configurar o plugin e personalizar o efeito de rolagem suave.

Primeiro, você precisará 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 de rolagem, tamanho do botão, opacidade, duração do fade, 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, 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 rolará para o topo da página, mas você pode alterá-lo para rolar até um elemento específico na postagem ou até mesmo vincular a uma página.

Há também uma opção para alterar a localização do botão. Ele aparecerá no canto inferior direito da tela por padrão, mas você também pode optar por movê-lo para qualquer um dos outros cantos.

O plugin WPFront Scroll Top também oferece filtros para mostrar o botão scroll-to-top 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 nas páginas' e escolher onde deseja exibir a rolagem para o efeito superior.

O plug-in também oferece designs de botões pré-criados que você pode escolher. Você deve ser capaz de encontrar facilmente um design que corresponda ao seu site.

Se você não encontrar um botão de imagem pré-criado que funcione para você, existe a opção de 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 para ver o botão de rolagem para cima em ação.

Adicionando rolagem suave ao efeito superior com jQuery no WordPress

Este método não é recomendado para iniciantes. É adequado para pessoas que se sentem à vontade para editar temas porque inclui a adição de código ao seu site.

Usaremos jQuery, algum CSS e uma única linha de código HTML em seu tema WordPress para adicionar o efeito de rolagem suave na parte superior.

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 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;
		});
});

Depois disso, você pode salvar o arquivo e enviá-lo para a pasta /js/ em seu diretório de temas do WordPress. Para obter mais detalhes, consulte nosso guia sobre como usar o FTP para fazer upload de arquivos para o WordPress.

Se o seu tema não tiver um diretório /js/ , você poderá criar um e fazer upload de smoothscroll.js para ele. Você também pode ver nosso guia sobre os arquivos do WordPress e a estrutura de diretórios para obter mais informações.

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.

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 este código no arquivo functions.php do seu tema. Não recomendamos editar diretamente os arquivos do tema porque o menor erro pode quebrar 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() . 'https://cdn2.wpbeginner.com/js/smoothscroll.js', array( 'jquery' ), '',  true );

No código acima, dissemos ao WordPress para carregar nosso script e também carregar a biblioteca jQuery, pois nosso plugin depende dele.

Agora que adicionamos a parte jQuery, vamos adicionar um link real ao nosso site WordPress que leva os usuários de volta ao topo. Simplesmente cole este HTML em qualquer lugar no 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 porque usaremos um ícone de imagem com uma seta para cima para exibir um botão de retorno ao topo.

Neste exemplo, estamos usando um ícone de 40x40px. Basta adicionar 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 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 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 uma rolagem suave ao seu site usando jQuery. Você também pode querer ver nossa escolha especializada dos melhores plugins do WordPress para pequenas empresas e nosso guia passo a passo sobre como iniciar uma loja online.

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.