25 fevereiro, 2014

Tutorial - Botão voltar ao topo com jQuery

Oie meus dragõezinhos ^-^
Bem,hoje eu resolvi fazer um tutorial que é de como colocar o botão voltar ao topo com jQuery,ou seja,um botão voltar ao topo que sobe suavimente,igual aqui do blog!
Leia Mais...

Vamos começar?
Primeiro vá ao Painel do Blog,depois vá em Layout,depois clique em Adicionar um Gadget,quando abrir o ''Adicionar um Gadget'' vai aparecer vários Gadgets,quando aparecer clique em HTML/JavaScript e cole este código:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type='text/javascript' language='Javascript'>
 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: '<img src="URL DA IMAGEM AQUI"/>', //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 corner
 anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
 state: {isvisible:false, shouldvisible:false},
 scrollup:function(){
 if (!this.cssfixedsupport) //if control is positioned using JavaScript
 this.$control.css({opacity:0}) //hide control immediately after clicking it
 var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
 if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
 dest=jQuery('#'+dest).offset().top
 else
 dest=0
 this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
 },
 keepfixed:function(){
 var $window=jQuery(window)
 var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
 var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
 this.$control.css({left:controlx+'px', top:controly+'px'})
 },
 togglecontrol:function(){
 var scrolltop=jQuery(window).scrollTop()
 if (!this.cssfixedsupport)
 this.keepfixed()
 this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
 if (this.state.shouldvisible && !this.state.isvisible){
 this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
 this.state.isvisible=true
 }
 else if (this.state.shouldvisible==false && 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=scrolltotop
 var iebrws=document.all
 mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
 mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
 mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
 .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
 .attr({title:'Topo!'})
 .click(function(){mainobj.scrollup(); return false})
 .appendTo('body')
 if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
 mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
 mainobj.togglecontrol()
 $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
 mainobj.scrollup()
 return false
 })
 $(window).bind('scroll resize', function(e){
 mainobj.togglecontrol()
 })
 })
 }
 }
 scrolltotop.init()
 </script>

Onde estiver escrito  URL DA IMAGEM AQUI cole o URL da imagem desejada.
Só isso!
Bem facil néah?!
Qualquer dúvida me pergunte comentando!
Bjs,Jess...

2 comentários:

  1. Obrigada me ajudou bastante !o proximo tutorial pode ser de como colocar welcome com imagem no blog ?já tentei e nunca consigo

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha de ajudado!
      Tem esse tutorial aqui se quiser : http://menina-fashio.blogspot.com.br/2013/11/como-colocar-imagem-no-welcome.html
      Bjs,Jess...

      Excluir

Olá♥ Fico super feliz que vai comentar ^^
Mas antes leia as regras:
-Não fale palavões.
-Não crie discussões.
-Antes de pedir para seguir seu blog,fale sobre o post.
-Não divulgo blogs.
-Quer criticar o blog? Critique,mas com educação.
-Aceito Tags e Selos
-Não me avise sobre novidades nos comentários, ou então, excluirei o comentário.
Comentários são bem-vindos<3
Obrigada,Jess♥