24.1.14

Tutorial - Seta para o Topo

Olá, gente!
Desculpa eu não estar postando, sabe? A inspiração não veem, mas agora já estou de volta! Ah, e uma perguntinha? O que está acontecendo com vocês que não estão mais comentando? Espero que isso se resolva =D

Então, eu trago um tutorial bem simples, sabe quando você tem que subir tudo de novo? Então eu trouxe uma solução! É a seta para o Topo, que ajuda muito vamos aprender o tutô?


Vá até Layout > Adicione um HTML/JavaScript e nele cole:
<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="COLOQUE AQUI O URL DA IMAGEM"/>', //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" && 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>=THIS.SETTING.STARTLINE)? TRUE : FALSEIF (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=SCROLLTOTOPVAR IEBRWS=DOCUMENT.ALLMAINOBJ.CSSFIXEDSUPPORT=!IEBRWS || IEBRWS && DOCUMENT.COMPATMODE=="CSS1COMPAT" && WINDOW.XMLHTTPREQUEST //NOT IE OR IE7+ BROWSERS IN STANDARDS MODEMAINOBJ.$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:''}).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 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()</SCRIPT>

Edite apenas a parte destacada!
Fácil não? Beijos!

6 comentários:

  1. Que fácil :)

    girlsofthemoonlove.blogspot.com

    ResponderExcluir
  2. Ótimo esse tutorial, muito simples mesmo.

    Te convido a participar do sorteio que está rolando lá no meu blog! ;)
    http://blog-fabulous.blogspot.com.br/

    Beijos,
    Stéphanie

    ResponderExcluir
    Respostas
    1. Obrigada, é mesmo e super simples de fazer!
      Pode deixar, que irei ver!
      Beijos!

      Excluir
  3. Eu to comentando normal *uu*
    Bem util , uso la no blog 0/ valeu pelo tuto e.e

    Geekegirlie.blogspot.com|| ✖G²Official ✝

    ResponderExcluir
    Respostas
    1. Anw' que bom saber que posso contar com você Celly!
      Útil mesmo, por nada ♥
      ~Abraços

      Excluir

*Comentários de baixo calão, brigas, ofensas ou nada educado não serão moderados.
*Seguindo, segue de volta? só acompanhado com um comentário sobre a postagem.
*Críticas são aceitas na boa, mas já vou avisando que todos os comentários são respondidos.
*Espero que tenha gostado do blog, não aceitamos tag, tenha um bom comentário!