Em nossa dica de hoje vamos ensinar você a colocar um botão de "ir para o topo" em seu blog WordPress. Este botão é útil para facilitar o deslocamento ao final da leitura de um post por exemplo, agilizando a tarefa de voltar ao topo do site para acessar menus de navegação e outros recursos.

Todo procedimento é muito simples e de fácil implementação, no entando basta fazer algumas adaptações caso veja necessidade para deixar o link à seu gosto, acompanhe o procedimento:

1 - Comece abrindo o arquivo footer.php de seu tema e adicionando o seguinte código imediatamente antes do fechamento da tag body:

<div id="go-top">Topo do Site</div>

2 - Agora é hora de estilizar com CSS. Abra o arquivo style.css e adicione o seguinte trecho ou altere-o conforme sua preferência:

#go-top{
position:fixed;
bottom:10px;
right:10px;
cursor:pointer;
display:none;
padding:3px 5px;
}

3 - Para finalizar, daremos "vida" ao botão com jQuery. Abra o arquivo header.php e antes do fechamento da tag head coloque o seguinte código:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
jQuery(window).scroll(function() {
if(jQuery(this).scrollTop() != 0) {
jQuery('#go-top').fadeIn();
} else {
jQuery('#go-top').fadeOut();
}
});

jQuery('#go-top').click(function() {
jQuery('body,html').animate({scrollTop:0},500);
});
});
</script>

Agora é só fazer os testes pois já está tudo pronto. Lembre-se somente de que para que o código funcione você precisa estar carregando a biblioteca do jQuery em seu tema, caso contrário não irá surtir efeito.

Se precisar, altere o código a seu gosto e bom proveito.

Mais sobre: , ,