Botão "Ir ao topo" com efeito Jquery

 

Veja como adicionar botão "Ir ao topo" com efeito Jquery. Temos uma demostração no nosso próprio blog.

1º Passo - Acesse o Painel do seu Blog e clique na Guia Modelo

2º Passo - Em seguida clique no Botão Editar HTML.

3º Passo - Localize "]]></b:skin>" (Obs: Use o localizador com o Ctrl + F)

4º Passo - Acima dele cole o seguinte código:

<#btn-dinamic { overflow: hidden; width: auto; z-index: 90; position: fixed; bottom: 20px; right: 20px; top: auto; left: auto; font-family: sans-serif; font-size: 1em; color: #fff; text-decoration: none; padding: 21px 20px; border: 1px solid #000; background: #272727; -webkit-border-radius: 9px; -moz-border-radius: 9px; -icab-border-radius: 9px; -khtml-border-radius: 9px; border-radius: 9px; } #btn-dinamic:hover { background: #4e9c9c; background: #272727 -webkit-gradient( linear,0% 0%,0% 100%,from( rgba( 255,255,255,.2 ) ),to( rgba( 0,0,0,0 ) ) ); background: #272727 -webkit-linear-gradient( top,rgba( 255,255,255,.2 ),rgba( 0,0,0,0 ) ); background: #272727 -khtml-linear-gradient( top,rgba( 255,255,255,.2 ),rgba( 0,0,0,0 ) ); background: #272727 -moz-linear-gradient( top,rgba( 255,255,255,.2 ),rgba( 0,0,0,0 ) ); background: #272727 -o-linear-gradient( top,rgba( 255,255,255,.2 ),rgba( 0,0,0,0 ) ); background: #272727 -ms-linear-gradient( top,rgba( 255,255,255,.2 ),rgba( 0,0,0,0 ) ); background: #272727 -icab-linear-gradient( top,rgba( 255,255,255,.2 ),rgba( 0,0,0,0 ) ); background: #272727 linear-gradient( top,rgba( 255,255,255,.2 ),rgba( 0,0,0,0 ) ); cursor: pointer; } #btn-dinamic:active { background: #272727; } #btn-dinamic span { display: block; overflow: hidden; width: 14px; height: 12px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirKAOTEAotMa6AX9M8FkbhxKRqaiU60UA7k8R4QmdLDmdFWY0T1IFSuRt8wpcie4f4hRF1dRL9766JN9ftTKOUjz8V3WkXfSKfXFypPsLAf7dsk2oIFmom71DWF30WQ6Eah06S0sBOn14/s1600/topo.png) no-repeat center center; } /></a></a>

5º Passo - Localize "</body>" (Obs: Use o localizador com o Ctrl + F)
6º Passo - Acima dele cole o seguinte Script:

<<a href='#' id='btn-dinamic'><span></span></a> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> /*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * * Version: 1.0, 12/03/2009 -----------------------*/ $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#btn-dinamic").scrollToTop(); }); </script> /></a></a>

7º Passo - Em seguida salve o modelo.

Fonte: Blogando com Facilidade