Pixel (blog - blogger profissional)

Conversão Hotmart

Google ADS

Este site utiliza cookies

Quer aprender como fiz esse aviso? CLIQUE AQUI

Baixe nossos 3 ebooks

Aprenda a criar anúncios Online nas principais ferramentas de Marketing da Internet ...

3 E-book Grátis

3 E-book Grátis
3 E-book Grátis

Pesquisar

Artigos em Destaque

Grátis

Baixe 3 ebooks
Aprenda a criar anúncios Online nas principais ferramentas de Marketing da Internet ...

Botão Voltar ao Topo com JavaScript - Blogger Profissional


Existem várias formas de criar um botão Back to Top (Voltar ao topo), neste post irei te mostra as 3 formas mais usadas.


Esse tipo de botão é muito usados em blogs e lojas online que tem a página muito cumprida, pois geralmente as informações principais ficam no topo da página então um link para que o usuário possa voltar rápido é essencial.


1ª Forma Âncora HTML:


Adicione um link para servir de âncora.
Exemplo: <a name="top"> </a>

Depois outro link para te puxar até a ancora criada.
Exemplo: <a href="#top">Voltar ao topo</a>

Essa forma pode te levar para qualquer lugar da página... Basta inserir o link âncora aonde você quer ser levado.

2ª Forma JavaScript:

Basta inserir esse script e chamar essa função através de um link ou onClik.
Exemplo:
<script type="text/javascript"> 
function scrollTopAnimated() {$("html, body").animate({ scrollTop: "0" });} 

</script> 

<button onclick="scrollTopAnimated()"> Voltar ao Topo</button> 

3ª Forma JavaScript(Animado Jquery):

Essa terceira e Última forma é só para ter uma suavidade na hora de voltar ao topo atravéz de uma animação. Basta adicionar uma virgula e quantos milisegundos você quer que a animação dure.
Exemplo:
<script type="text/javascript"> 
function scrollTopAnimated() {$("html, body").animate({ scrollTop: "0" }, 3000);} 
</script> 

<button onclick="scrollTopAnimated()"> Voltar ao Topo</button> 
re.


Esse efeito pode ser adicionado em qualquer elemento na sua página:
  • Imagens
  • Div
  • Links
  • etc.

Algumas plataformas não são compatíveis com essa suavização Jquery... Para abilitar basta inserirr após sua tag <head> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 



Veja no próximo post como deixar um elemento da sua página fixado, de forma que ele não role junto com a página.


Nenhum comentário:

Postar um comentário

Deixe um comentário com seu Feedback sobre este Conteúdo.