Volta ao topo com efeito deslizante
Autor: Marcy Moraes | Publicado: 2015-11-21T12:00:00-03:00




Olá pessoal!&nbsp;

Este aqui é um post programado, pois provavelmente estarei sem internet, mas quando voltar eu respondo aos comentários.

Trouxe um tutorial, já bem conhecido e usado, mas mesmo assim decidi trazer já muitos ainda não conhece, que é o de colocar Botão de voltar ao topo com efeito deslizante.
É bem fácil e não precisa ir no código do blog.



Primeiro vá em Layout&gt;&gt; Clique em Adicionar um Gadget&gt;&gt; Depois em HTML Java/Script&nbsp;e na caixa coloque o seguinte código:

&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;&lt;script type='text/javascript' language='Javascript'&gt;var scrolltotop={//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},controlHTML: '&lt;img src="AQUI O ENDEREÇO DE SUA IMAGEM"/&gt;', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corneranchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" linksstate: {isvisible:false, shouldvisible:false},scrollup:function(){if (!this.cssfixedsupport) //if control is positioned using JavaScriptthis.$control.css({opacity:0}) //hide control immediately after clicking itvar dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)if (typeof dest=="string" &amp;&amp; jQuery('#'+dest).length==1) //check element set by string existsdest=jQuery('#'+dest).offset().topelsedest=0this.$body.animate({scrollTop: dest}, this.setting.scrollduration);},keepfixed:function(){var $window=jQuery(window)var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetxvar controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsetythis.$control.css({left:controlx+'px', top:controly+'px'})},togglecontrol:function(){var scrolltop=jQuery(window).scrollTop()if (!this.cssfixedsupport)this.keepfixed()this.state.shouldvisible=(scrolltop&gt;=this.setting.startline)? true : falseif (this.state.shouldvisible &amp;&amp; !this.state.isvisible){this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])this.state.isvisible=true}else if (this.state.shouldvisible==false &amp;&amp; this.state.isvisible){this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])this.state.isvisible=false}},init:function(){jQuery(document).ready(function($){var mainobj=scrolltotopvar iebrws=document.allmainobj.cssfixedsupport=!iebrws || iebrws &amp;&amp; document.compatMode=="CSS1Compat" &amp;&amp; window.XMLHttpRequest //not IE or IE7+ browsers in standards modemainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')mainobj.$control=$('&lt;div id="topcontrol"&gt;'+mainobj.controlHTML+'&lt;/div&gt;').css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}).attr({title:'Scroll Back to Top'}).click(function(){mainobj.scrollup(); return false}).appendTo('body')if (document.all &amp;&amp; !window.XMLHttpRequest &amp;&amp; mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any textmainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing textmainobj.togglecontrol()$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){mainobj.scrollup()return false})$(window).bind('scroll resize', function(e){mainobj.togglecontrol()})})}}scrolltotop.init()&lt;/script&gt;

Onde está escrito&nbsp;AQUI O ENDEREÇO DE SUA IMAGEM&nbsp;é só trocar pela URL da imagem.&nbsp;

Aqui tem algumas imagens de subir ao topo.



Depois disso é só Salvar. Recomendo que deixe sem título.

Bom pessoal, espero que tenham gostado!!!