Voltar ao topo - Botão subir/descer com efeito deslizante [003]

Hello! Wherever you are... Hoje venho trazer um tutorial simples, básico mais muito pratico! Vou mostrar como colocar um botão de subir e descer, com efeito deslizante. Já temos outro tutorial um pouco similar, porém o efeito é somente de subir ao topo com efeito deslizante. Apesar quase não utilizar aqui no blog, acho essencial para blog/sites que tenham postagens extensas. Pois quando o leitor/visitante acabar de ler a matéria não precisara ficar rodando a pagina até chegar ao topo, basta apertar um botãozinho ali do lado e vai subir ao topo com todo estilo rs.

Vocês podem ver o efeito acessando o link abaixo, você vai encontrar o botão no canto inferior do blog, no final da postagem vou liberar alguns botões para vocês usarem. E também explicando como adaptar ao seu botão. Ah! Os créditos vão ficar no final da postagem, afinal o efeito não foi criado por mim rs, apenas estou compartilhando aqui no blog. Okay, vamos lá!

Brevia do efeito

1. Primeiramente abra sua conta do Blogger, em seguida vá até o HTML do seu blog, clique dentro da área e ative a pesquisa selecionando o Ctrl+F, uma barrinha vai aparecer e nela cole o seguinte código  ]]></b:skin>, clique em "Enter", assim que achar acima dele cole: 

Códigos

/*Botão Subir e Descer
----------------------------------------------- */
.button_up{
padding:7px; /* posicionamento interno da imagem */
border:1px solid #fff; /* cor da borda, troque ou exclua se desejar */
position:fixed;
background: transparent url(ENDEREÇO DE SUA IMAGEM SUBIR) no-repeat top left; /*troque transparent pelo código da cor, caso queira*/
background-position:50% 50%;
width:52px; /* largura do botão */
height:28px; /*altura do botão */
bottom:80px; /* distância em relação à base */
right:5px; /* distância da direita */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* posicionamento interno da imagem */
border:1px solid #fff;  /* cor da borda, troque ou exclua se desejar */
position:fixed;
background: #transparent url(ENDEREÇO DE SUA IMAGEM DESCER) no-repeat top left; /*troque transparent pelo código da cor, caso queira*/
background-position:50% 50%;
width:52px; /* largura do botão */
height:28px; /* altura do botão */
bottom:42px; /* distâmcia em relação à base */
right:5px; /* altere se quiser alinhar à esquerda */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

OBS: Nas partes marcadas em vermelho é a onde você vai colocar o endereço da imagem. Existem outras partes que podem ser modificadas ao seu gosto, mas só mexa se entender de HTML. Como eu gosto de bancar professora, o código acima tratasse do estilo e configurações do botão. 

2. Ainda dentro do HTML usando o mesmo esquema de pesquisa do anterior, procure por </body> assim que achar acima dele cole:

Códigos

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
    <div class='button_down' id='button_down' style='display:none;'/>
    <script>
    //<![CDATA[
    (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
    $(function() {
    var $elem = $('body');
    $('#button_up').fadeIn('slow');
    $('#button_down').fadeIn('slow');
    $(window).bind('scrollstart', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'0.2'});
    });
    $(window).bind('scrollstop', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'1'});
    });
    $('#button_down').click(
    function (e) {
    $('html, body').animate({scrollTop: $elem.height()}, 800);
    } );
    $('#button_up').click(
    function (e) {
    $('html, body').animate({scrollTop: '0px'}, 800);
    } );});
    //]]>
    </script>

O código acima é um script é ele que faz a magia de tudo acontecer. Ele não precisa de alterações nem nada parecido, a não ser que entenda disso e queira mudar o efeito, o que só é aconselhado para quem entende de HTML. 

Agora é só salvar! E verificar se esta tudo funcionando, porém só vai aparecer se colocar as imagens, lembra? Então aqui vai alguns utilitários para vocês usarem, fiquem a vontade em usar ou criar o de vocês.

___________________(Entendendo o código)___________________

1. No primeiro código, as partes marcadas em vermelho é a onde coloca as imagens.

2. Dependendo da imagem que utilizar sera necessário mexer no código CSS (primeiro código), adaptando ao tamanho da sua imagem. Lembrando que as vezes terá que deixar o tamanho maior do que da imagem real, então vá aumentando o tamanho da imagem no CSS e visualizando para ver se esta tudo ok! O código esta marcado em roxo.

3. Pode ocorrer da imagem subir e a imagem descer, fiquem meio que uma sobre a outra, para resolver isso é bem fácil, basta mexer na margem do CSS. Basta procurar por bottom:80px; marcado em verde limão, é ir aumentando o número ate se afastarem ao seu agrado. Lembre sempre de ir salvando e visualizando o resultado.

4. Remover bordas brancas. Basta procurar por border:1px solid #fff; e onde está 1px, é só colocar 0px e salvar.

___________________(fim da explicação)___________________

Todos os créditos vão para o blog Elaine Gaspareto, então se utilizarem não esqueçam de creditar, ok? Então é isso. Qualquer duvida é só perguntar. <3