Início
> Blogger Profissional
> Botão voltar ao topo HTML
> Efeito Voltar ao topo JavaScript
> Link de voltar ao topo da página
> Voltar ao topo
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>
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.