fica

appvbt

menu css interativo json

Procurando...

Acompanhe, partilhe!

Login Logout Version

Bem vindo a Verbratec!

Contato Sobre Mapa do site

16 de jul de 2012

Jair de Jesus
Textual description of firstImageUrl

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.
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!







Comentários
1 Comentários
 Comente Disqus
comments powered by new Disqus

Um comentário:

Design by Jair de Jesus - Josh Peterson

Verbratec© Desktop 2018