Voltar ao Topo com Efeito Deslizante

http://www.colourlovers.com/palette/2663943/candy_candy paleta

2Sleppy http://reinokawaii.blogspot.com.br/2013/01/2leep-posts-relacionados-coloridos.html

Linkwin http://reinokawaii.blogspot.com.br/2013/01/linkwithin-personalizado-com-css.html

http://www.candylland.net/2013/03/voltar-ao-topo-com-efeito-deslizante.html

Balão de comentarios : http://2.bp.blogspot.com/_SGKE7vHfmzA/SSZBtBDd-zI/AAAAAAAAC28/awDWRFc7CSc/s400/Comentario.png

Oi, aqui é a Rô ;3 Como estão? Espero que estejam bem!!! Hoje lhes trouxe um tutorial bem simples, mas legal de ser adicionado ao blog porque ajuda ao leitor quanto à navegação; é o famoso voltar ao topo rsrs...só que esse tem efeito deslizante e aparece apenas quando se desliza pela página. Uso em meu blog, caso queiram ver funcionando. Vamos lá!

1. O efeito é feito (rs) com o script Jquery; portanto se você já usa, pule essa primeira parte, que é a de adicionar o script acima de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

2. Antes de ]]></b:skin> cole isso:

#Subir {
position: fixed;
bottom: 0px;
right: 0px;
}

#Subir span {
width: 0px;
height: 0px;
display: block;
background: url(URL DA IMAGEM) no-repeat center center;
}


Em que:

bottom: 0px; é a distância do rodapé para com a imagem (sugestão: 30px).

right: 0px; é a distância da imagem até a margem direita do blog (sugestão: 30px); se quiser colocar a esquerda, troque right por left.

width: 0px e height: 0px se referem a largura e altura da imagem respectivamente.

background: url(URL DA IMAGEM)...será onde você adiciona uma imagem que mostrará ao leitor onde clicar para voltar ao topo (sugestão-> width: 72px e height: 99px).

Basta substituir os valores e URL da imagem de acordo com seu blog e gosto.

3. E antes de </body> cole isso:

<div id='Subir'>
<a href='#UP'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Voltar ao Topo
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#Subir").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#Subir').fadeIn();
} else {
jQuery('#Subir').fadeOut();
}
});
jQuery('#Subir a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);


return false;
});
});

});
//]]>
</script>

Visualize, deslize um pouquinho sua página para ver se aparece uma imagem e salve. Espero que tenham gostado e beijoss...

Créditos Ciudad Blogger/We heart it.