Ir para conteúdo
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>

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Editado por quintelab
Removido link para site externo

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Kelven
      Olá pessoal tudo bem?
       
      Então eu quero colocar um formulário de newsletter em um servidor q não tem suporte para php, o negócio é q depois que a pessoa clica em se cadastrar eu quero que ela seja redirecionada para outro site, então gostaria de saber como posso estar fazendo isso usando apenas javascript, jquery ou ajax com o API do Mailchimp? Porque já procurei muito e não achei, só achei em php.
    • Por reginaldo123
      estou com dificuldade em criar uma url pernalizada exemplo
       
      href="www.bolacha,.com/novabolacha"
      value= "www.bolacha.com"
       
      quando o usuario copia a url para colocar em outra pagina quero que apareça o conteudo de value, e seja direcionado para o href.
       
    • Por Incompetech
      Então.. a um tempo atrás eu fiz um post pedindo ajuda em relação a tooltip mas não obtive resposta, então decidi deixar essa funcionalidade para depois.
      Como disse na minha primeira pergunta eu estou praticando HTML / CSS / JS ... então comecei a fazer uma entrada para MU ONLINE que foi um dos jogos que mais joguei em épocas de LAN HOUSE. Então o que quero perguntar a vocês é o seguinte:

      Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.
       
      No meu caso eu criei essa entrada no Photoshop: 
       
      E no caso gostaria de fazer a mesma coisa porém clicando nas setas que estão do lado da box como podem ver no centro da imagem.
      Para isto eu devo usar Js? E qual código devo usar, eu sou super perdido com Js.
      Agradeço desde já! :D

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.