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.
Muito bom! Gostaria de saber como eu faço para o Joomla vc poderia me ajudar?
Desde já agradeço!