Link ao topo.

Link para rolar a página html para o topo com efeito suave deslizar animate com JQuery.

Vamos direto ao objetivo e no final será criado automaticamente ao rolar a scrollbar, um link ao topo similar ao que existe aqui no Verbratec Ajuda.
Link para o topo da página html com animate JQuery.

Link para o topo da página html com animate JQuery.

Insere no css de seu blog:
#toTop:hover {background-color: yellow;border: 6px outset darkGreen!important;border-radius: 5px 5px 5px 5px;bottom: 5px;color: darkGreen;cursor: pointer;font-weight: 700;padding: 5px;position: fixed;right: 5px;text-align: center;text-decoration: none!important;width: 35px; } #toTop {background-color: forestGreen;border: 6px outset darkGreen!important;border-radius: 5px 5px 5px 5px;bottom: 5px;color: yellow;cursor: pointer;font-weight: 700;padding: 5px;position: fixed;right: 5px;text-align: center;text-decoration: none!important;width: 35px;}

Agora localize a tag de fechamento </body> e coloque o seguinte código imediatamente acima:
<a id="toTop" style="display: block; "> <span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Topo</span></a><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> <![CDATA[ $(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() { $("#toTop").scrollToTop(); }); ]]> </script>

Isto é tudo click em salvar modelo e está pronto. Sempre é bom salvar o seu modelo antes de qualquer alteração. Sugiro também que pratique em blog de testes antes de passar para seu blog oficial e use a interface antiga do BLOGGER.

Em resposta a pergunta de Carolina Floare no Fórum de ajuda do Blogger.
Como já escrito em outras postagens; querendo ter qualquer item ou gadget, código, etc. que tenha visto em meu blog poste um comentário ou envie um e-mail e farei todo o possível para ajudar na implementação.
Abraço e uma boa navegação!

Baseado no original de *Craig Wilson em https://www.ph-creative.com

Link para o topo da página BLOGGER agora com botão para aplicar ao seu blog muito mais fácil! - Adicione primeiro ao seu blog de testes por favor!
Para ver como fica aplique no seu blog de testes.
Este é um novo estudo para mim; quero facilitar ao máximo quando possível. Creio que é muito mais fácil clicar no botão, escolher o blog e clicar em adicionar widget, está pronto, simples assim.
Use FireFox para desenvolvimento. Um abraço!

<span>Obrigado por sua preciosa visita!</span><br />
<style type="text/css">
#scrollTop div {
    left: 0;
    right: 10px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 149px;
}
#scrollTop .level-2 {
    background: url("https://i1178.photobucket.com/albums/x375/jairdejesustec/rocket_button_up.png") no-repeat scroll -149px 0 transparent;
    display: none;
    height: 250px;
    opacity: 0;
    z-index: 1;
}
#scrollTop .level-3 {
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 150px;
    z-index: 2;
}
#scrollTop .level-4 {
float:left;position:absolute;top:120px;left:50px;
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 15px;
    z-index: 8;
}
#scrollTop {
    background: url("https://i1178.photobucket.com/albums/x375/jairdejesustec/rocket_button_up.png") no-repeat scroll 0 0 transparent;
    cursor: default;
    display: block;
    height: 250px;
    margin: -125px 0 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0;
    top: 98%;
    width: 149px;
    z-index: 11;
}</style><div id="scrollTop" style="display:block;">
<div class="level-2" style="opacity: 0; display: block; ">
</div>
<div class="level-3">
</div>
<div class="level-4">
<a href="https://www.verbratec.com.br/2012/07/link-ao-topo.html" title="Add widget link ao topo" target="_blank"><span style='font-size:8px;'>verbratec</span></a></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script typr="text/javascript">
var browser_detect = {
    IE:     !!(window.attachEvent && !window.opera),
    Opera:  !!window.opera,
    WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
    Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
    MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
}
var mobileSafari = browser_detect.MobileSafari;
var upAnimate=false;
var anim_time;
if($.browser.msie)anim_time=0;
else anim_time=500;
var anim_time_short = (anim_time==0)?0:350;
var scroll_animate=false;
var menuSelected=false;
var domStart = new Date();
function culculateDomRedy(ads){
    domStop = new Date();
    loadTime = (domStop.getTime()-domStart.getTime());
    if(console){
        logStr = (ads)?ads+' ':'';
        logStr +=(loadTime<1000)?'cache =>':'full refresh =>';
        console.log((logStr + loadTime));
    }
}
function getNewSrc(src,fType){
    // src = $('#description_01')[0].src;
    preNewSrc = src.split('/');
    preNewSrc = preNewSrc[preNewSrc.length-1].split('.');
    newSrc = preNewSrc[0]+fType;
    return newSrc;
}
function setImgSrc(id){
    id = '#'+id;
    $(id)[0].src=project_path+getNewSrc($(id)[0].src,'.svg');
}
function getScrollY(){
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return scrOfY;
}
function scrollTo(key){
    NewDocumentHeight=0;
    switch(key){
        case 'top':{
            NewDocumentHeight=0;
            break;
        }
        case 'contact':{
            var browserWindow = $(window);
            var WindowHeight = browserWindow.height();
            var ContentHeight = ($('#content').height()>$('#wrapper').height())?$('#content').height()+237:$('#wrapper').height();
            NewDocumentHeight = (WindowHeight>ContentHeight)?WindowHeight:ContentHeight;
            break;
        }
    }
    op = $.browser.opera ? $("html") : $("html, body");
    op.animate({ scrollTop: NewDocumentHeight }, 'slow');
}
var rocketFireTimer=false;
var rocketFireState = [0,0,0,1];
var rocketFireFrameLength = 149;
var rocketFireFrameStart = 298;
var rocketFireAnimateTime = 100;
var toLeftFireAnimation = false;
function rocketFireAnimate(){
    for(i=0;i<rocketFireState.length;i++){
        if(rocketFireState[i]==1){
            rocketFireState[i]=0;
            if(!toLeftFireAnimation){
                if((i+2)<rocketFireState.length)rocketFireState[i+1]=1;
                else {
                    rocketFireState[0]=1;
                    toLeftFireAnimation=true;
                }
            }
            else{
                if((i-1)<0)rocketFireState[1]=1;
                else {
                    rocketFireState[i-1]=1;
                    toLeftFireAnimation = false;
                }
            }
            break;
        }
    }
    $('#scrollTop .level-2').css({'background-position':'-'+(rocketFireFrameStart+(i*rocketFireFrameLength))+'px 0px','display':'block'});
    rocketFireTimer = setTimeout('rocketFireAnimate()',rocketFireAnimateTime);
}
function initScrollTop(){
    if(!mobileSafari){
        $('#scrollTop div.level-3').hover(function(){
            if($.browser.msie)this.parentNode.children[0].style.display='block';
            else $(this.parentNode.children[0]).stop().fadeTo(500,1);
        },function(){
            if(upAnimate||scroll_animate)return;
            if($.browser.msie) this.parentNode.children[0].style.display='none';//.css({'background-position':'0 -68px'})
            else $(this.parentNode.children[0]).stop().fadeTo(500,0);
        });
        $('#scrollTop div.level-3').click(function(){
            scroll_animate = true;
            $('#scrollTop .level-2').css({'background-position':'-298px 0','display':'block'});
            // $(this.parentNode.children[0]).css({'background-position':'0 -500px'});
            op = $.browser.opera ? $("html") : $("html, body");
            rocketFireTimer = setTimeout('rocketFireAnimate()',rocketFireAnimateTime);
            op.animate({ scrollTop: 0 }, 'slow',function(){
                scroll_animate = false;
                if(!upAnimate){
                    upAnimate=true;
                    thisTop = $('#scrollTop')[0].offsetTop+250;
                    $('#scrollTop').animate({'margin-top':'-='+thisTop+'px'},300,function(){resetScrollUpBtn();});
                }
            });
        });    
        window.onscroll = function () {
            if((!scroll_animate)&&(!upAnimate)){
                body_elem = $("#body_id")[0];
                window_elem = $("#html_id")[0];
                if(window.innerHeight){
                    wind_height = window.innerHeight;
                    wind_scroll = window.scrollY;
                }
                else{
                    wind_height = document.documentElement.clientHeight;
                    wind_scroll = getScrollY();
                }
                elem = $("#body_id")[0];
                scrollBtn = $("#scrollTop")[0];
                if((elem)&&(scrollBtn)){
                    // $('#log').append('Zzz...<br />');
                    if((scrollBtn.style.display=='none')&&((wind_height*1.5)<wind_scroll)){
                        scroll_animate = true;
                        $("#scrollTop").fadeIn(anim_time,function(){scroll_animate = false;this.style.display='block';});
                    }
                    if((scrollBtn.style.display=='block')&&((wind_height*1.5)>wind_scroll)){
                        scroll_animate = true;
                        $("#scrollTop").fadeOut(anim_time,function(){scroll_animate = false;this.style.display='none';});
                    }
                }
            }
        };    
    }
    else{
        setTimeout(function() { window.scrollTo(0, 1);}, 100);
    }
}
function resetScrollUpBtn(){
    $('#scrollTop .level-2').css({'background-position':'-149px 0px','display':'none'});
    $('#scrollTop').css({'margin-top':'-125px','display':'none'});
    upAnimate=false;
    clearTimeout(rocketFireTimer);
}

function load_on_load(){
    initScrollTop();
    setTimeout(function(){
        var tmp = 1;
    },1500);
}
$(document).ready(function(){load_on_load();});
</script>

التسميات

Páginas

Links

Últimas

Link ao topo.

Jair de Jesus

إرسال تعليق

Jair de Jesus

نموذج الاتصال