Botão Voltar ao Topo com Jquery

Vi este recurso em um blog esta semana e achei bem legal.
Pode ser configurado com um código CSS3 e aparece a medida que você vai usando o scroll descendo o site e ao clicar sobe suavemente.
Aí, é claro, aprendi como se faz e vou ensinar aqui agora!

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Vá em Modelo → Editar HTML→ Clique em Prosseguir
1ª Parte - Colocar o código Javascript
Encontre a linha: </body> e cole este código ▼ acima desta linha:
<a href='#' id='toTop'>▲ TOPO</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}});

  $(function() {
                $(&quot;#toTop&quot;).scrollToTop();
            });
        </script>

» Clique em Visualizar para se certificar que está indo tudo certo.

» Clique em Salvar modelo.

2ª Parte - Colocar o Código CSS
Encontre a linha: ]]></b:skin>
Cole este código CSS ▼ logo acima desta linha.
/* to top */
#toTop {
width:50px;  /*Largura do botão*/ 
height:50px; /*Altura do botão*/
background: transparent; /*Cor do fundo do botão*/ 
border:1px solid #333; /*Cor da borda */ 
color:red; /*Cor da letra */
text-align:center; /*Alinhamento do texto */ 
padding:5px; /*Distancia entre texto e borda */ 
position:fixed; /*Posição que faz com que ele corra por toda a página*/ 
bottom:50px;  
right:50px; 
cursor:pointer; 
text-decoration:none; 
font-weight:bold;
font-size: 14px; /*Tamanho da Letra*/
-moz-border-radius:5px;  /*Definições para as bordas arredondadas*/ 
-khtml-border-radius:5px; 
-webkit-border-radius:5px; 
border-radius:5px;
opacity:0.3; /*Opacidade*/
}
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

► Neste código CSS o Link para o Topo fica deste jeito ▲ TOPO
Veja neste Site, quando você começar a rodar o scrool do seu mouse para subir a página o link para o topo irá aparecer.

» Você pode ajustar o código da forma que quiser.

☺Aprenda mais sobre as cores para colocar no seu link para o topo acessando este post:
»Como identificar cores
☺Você pode também alterar o símbolo ▲ →saiba como alterá-lo com este post:
»Símbolos - Atalhos do Teclado

É claro que fiz algumas adaptações neste Link para o Topo » Veja no DEMOPLATE

» Para que seu botão para o topo fique igual ao do Demoplate:
Você vai usar este código CSS ▼ no lugar do primeiro:
/* to top */
#toTop {
width:50px;  /* Largura do botão*/ 
height:50px; /*Altura do botão*/
background: transparent; /*Cor do fundo do botão*/ 
padding:5px; /* Distancia entre texto e borda */ 
position:fixed; /* Posição que faz com que ele corra por toda a página*/ 
bottom:50px;  
right:50px; 
cursor:pointer; 
opacity:0.3; /*Definição para opacidade da imagem*/
}
Vai colocar o link  para a imagem no lugar da palavra ▲TOPO:
<a href='#' id='toTop'><img src='LINK DA SUA IMAGEM'/></a>

Utilizei esta imagem para o botão voltar ao topo do Demoplate:

Ele fica cinza por causa do comando opacity do código CSS.

Você pode encontrar muitas imagens para o topo neste post:
» Imagens de Setas para Cima para utilizar no Botão para o Topo do seu Blog


Observações Importantes
A fonte que usei para criar este tutorial foi um post da Mamanunes mas o post do site ao qual é atribuído este javascript nem existe mais, por isso não coloquei a parte das atribuições antes do javascript propriamente dito para não ocupar muito espaço, mas estou atribuindo aqui neste post:
/*-----------------------
* 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
-----------------------*/ 
Além disso este tutorial utilizou uma versão antiga de jquery e aqui estou utilizando uma mais nova que funciona do mesmo jeito.
Também utilizei este site para aprender mais sobre este hack.

Botão Voltar ao Topo com Jquery Botão Voltar ao Topo com Jquery Reviewed by Aurea on 1/02/2013 Rating: 5

8 comentários:

  1. ta dando erro de sintaxe na linha:
    $(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")})}});
    estou usando esse codigo no DW cs5

    ResponderExcluir
  2. @TanaNETOlá Tana NET,
    Entrei em seu blog e vi que usa o modelo dinâmico do blogger.
    Infelizmente não sei o que pode estar acontecendo.
    Fiz este tutorial baseado em templates como o Simples ou outros 2006 ou 2010.
    Um abraço,
    Áurea

    ResponderExcluir
  3. Funcionou perfeitamente para mim! Muito obrigado, amigo.

    ResponderExcluir
  4. eu fiz e deu certo,mas algumas q eu coloco aparece só a metade,por exemplo essa: http://2.bp.blogspot.com/-DEMEjhr8cFE/T3DEBJvO8sI/AAAAAAAAAz8/umepyIiA_Ks/s1600/vat5.png
    vc sabe como faço para aparecer toda a imagem?
    Obrigada desde de já,e se ñ souber eu coloco uma menor..

    ResponderExcluir
    Respostas
    1. Mar's,
      Para que sua imagem apareça por completo terá que alterar estas medidas:
      width:50px; /* Largura do botão*/
      height:50px; /*Altura do botão*/
      no código CSS do seu botão para as medidas da imagem.
      Depois me conta se deu certo!
      Um abraço

      Excluir
  5. ah esqueci de falar,obrigada por fazer este post me ajudou muito e aposto q vai ajudar muitas pessoas ainda :)

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.