Jump to content
4ly

Como faço para o meu botão âncora ter uma animação de rolagem

Recommended Posts

Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 

Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 

Esse é o código

 

<button id="explorer"><a href="#about">Explorar</a></button>

Share this post


Link to post
Share on other sites

Mano.. não manjo nada de código kkk 
Mas to construindo um site através da Starter Digital tudo pegando código dali e código daqui..

 

Estava com esse mesmo problema há algumas semanas atrás.. acabei achando em algum lugar o seguinte código:
 

var $doc = $('html, body');
$('a').click(function() {
    $doc.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 1000);
    return false;
});


Esse "1000" é o tempo em mílissegundos que vai levar para o "scroll" se completar.

Era 500 quando copiei o código.. mas achei que estava rápido demais e dobrei.. ficou bom! KKK

Obs.: Não sei bem onde insere kkk.. é que aqui no Starter tem uma janela SCRIPT que você cola esses códigos CSS doidos aí entre <script> e </script>. Espero que dê certo aí assim como aqui deu!

Edited by quintelab
Removido link para site externo

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By kikekun
      Olá!
      Eu queria fazer um criador de personagens para colocar na web, e tomei como base este código aqui: https://codepen.io/kristenmay/pen/kkkdBr pra fazer em javascript, mas ainda ta limitado pro que eu quero.
      Preciso de um botão que altere mais de uma imagem ao mesmo tempo (por exemplo: pra fazer com que duas imagens de cabelo apareçam ao mesmo tempo, uma na camada da frente, outra na de trás);  um botão para alterar as cores das imagens (até consegui colocar essa barra de HUE, mas ela só muda a cor da primeira imagem, e quando passa, volta pro padrão (esse vermelho que coloquei em todas pra facilitar). mas o ideal mesmo seria um botão especifico pra o tipo de imagem que esteja sendo mudada, por exemplo... o de cabelos mudaria a cor da imagem entre moreno; castanho claro; castanho escuro; branco; loiro claro; loiro escuro; e ruivo... já o botão de cor da pele mudaria entre branco; pardo; asiatico e negro); e um botão de download para as pessoas baixarem seu personagem criado = P Da pra fazer isso? como eu faço? xD (posso tentar postar o codigo em algum lugar se precisar)

      Ta assim:

    • By 4Unknow
      Boa tarde pessoal.
      Estou criando uma página. Editando na verdade.
      Gostaria de saber se é possível deixar o texto retinho do lado direito igual está ao lado esquerdo.
      Existe alguma forma para fazer isso?
       
      Agradeço pela ajuda.
       
       

    • By KABEst
      boa noite, é meu primeiro post aqui, eu preciso de ajuda pra colocar um "churrascômetro" no meu site do wordpress, nao tenho noçao nenhuma de como fazer isso, alguem pode me dar um norte? é pra um trabalho da faculdade. obrigado

      exemplo de como eu quero fazer:
      http://www.epa.com.br/churrascometro/
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.