Como adicionar "voltar para cima" no seu blog com CSS3/Jquery

Hoje começaremos uma serie de tutoriais que irá melhorar a aparência e a acessibilidade do seu blog.

“Voltar para cima” é um pequeno mas importante detalhe que ajudará o seu blog a se destacar. Para alem disso, em blogs aonde os artigos são longos, o que faz o site seja longo, eliminará a perca de tempo e paciência na rolagem vertical com o rato.

Apesar da maioria dos utilizadores não terem ideia, o mesmo efeito pode ser alcancado através do teclado “home” na windows

O lugar mais comum para colocar o voltar para cima butão é o“footer”. Contudo neste tutorial irémos fazer algo diferente. Quando o utilizador atingir uma certa posição no blog o butão “magicamente” apareça. Para atingir este efeito utilizarémos o javascript framework Jquery e algumas propriedades do novo CSS3. É de frisar que algumas dessas propriedades não são suportadas pelo Internet explorer 6 e 7 e só teráo efeitos nos “browsers modernos”. Paciencia.

Pressuponho que ao acompanhar este tutorial já te encontras no painel ou algures no seu blog. Se não:

1. Log in no seu blog.
2. Vai na Aparencia >> Editar HTML
3. Salva o seu template primeiro. ( Nao quero estragar o seu dia caso nao funcione, nunca se sabe!)


Este é o lugar aonde irémos inserir todos os nossos códigos. O Jquery irá fazer todo o trabalho, nos só temos de criar um div com id ‘voltarparacima’. Com a propriedade position:fixed; farémos magia ao posicionar o butão fixo a partir de um certo ponto.

Codigo explicacao

HTML

Vamos criar um div com id ‘voltarparacima’.

<div id=”voltarparacima”>Voltar para cima</div>

CSS

Hora do css entrar em accao.

<style>
#voltarparacima{
width:100px;
        padding:5px 5px 5px 15px;
        position:fixed; /* determina a posicao fixa para o nosso botao*/
        bottom:5px; 
        right:5px;
        cursor:pointer;// pelo facto de nao termos usado a (anchor),e bom definir o cursor pointer para indicar link.
        color:#333333; 
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:11px;
        /* apartir deste ponto utilizaremos o poder do css3 para criar um verdadeiro “photoshop” butao */
        border: solid 1px rgb(153, 153, 153);
        -webkit-border-radius: 2px 2px; 
        border: solid 1px rgb(153, 153, 153);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221,221,221)));
        text-shadow: 0px 1px 1px rgba(255,255,255,1);
}</style> 

JQUERY

Por ultimo e mais importante a hora do Jquery encerrar a festa.

<script language="javascript" src='http://code.google.jquery-1.2.6.min.js'></script> // link para a jquery library.
<script type="text/javascript">
$(function () {
var $accao=$('#voltarparacima');
var $window = $(window);
$window.scroll(function () {
if ($(this).scrollTop() != 0) {
$accao.fadeIn(500);
} else {
$accao.fadeOut(500);
}
});
$accao.click(function () { // ao clickar utilizaremos a propiedade scrollto para regresar-mos ao topo da pagina.
$('html,body').animate({
scrollTop: 0
},
1500); // anima ao voltar para o topo a uma velocidade de 1500. Ou como bem intenderes.
});
});
</script>

Codigo completo

4.Copie tudo e cola antes do fim de

</body>

Codigo final:

<style>#voltarparacima{
width:100px;
        padding:5px 5px 5px 15px;
        position:fixed; /* determina a posicao fixa para o nosso botao*/
        bottom:5px; 
        right:5px;
        cursor:pointer;
        color:#333333; 
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:11px;
        /* apartir deste ponto utilizaremos o poder do css3 para criar um verdadeiro “photoshop” butao */
        border: solid 1px rgb(153, 153, 153);
        -webkit-border-radius: 2px 2px; 
        border: solid 1px rgb(153, 153, 153);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221,221,221)));
        text-shadow: 0px 1px 1px rgba(255,255,255,1);
}</style> 
<div id=”voltarparacima”>Voltar para cima</div>

<script language="javascript" src='http://code.google.jquery-1.2.6.min.js'></script> // link para a jquery library.
<script type="text/javascript">
$(function () {
            var $accao=$('#voltarparacima');
            var $window = $(window);
    $window.scroll(function () {
        if ($(this).scrollTop() != 0) {
            $accao.fadeIn(500);
        } else {
            $accao.fadeOut(500);
        }
    });
    $accao.click(function () { // ao clickar utilizaremos a propiedade scroll to para regresar ao topo  da pagina. 
        $('html,body').animate({
            scrollTop: 0
        },
        1500); // anima ao voltar para cima a uma velocidade de 1500
    });
});
</script> 

5.Salva, e teste.

Conclusao

Utilizando jquery e css3 fizemos um "voltar para cima" butão simples e moderno. Apesar das funcionalidade referidas do CSS3 não suportadas por alguns browsers, mesmo assim o efeito no IE, e Firefox 3.5 e bem elegante e funcional.

Se tiveres duvidas e só comentar abaixo.
Caso houver algum bug ou coisa parecida esteja livre em me informar