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 alisonalves
      Boa tarde Pessoal. Meu site passou por uma nova reestruturação e algumas páginas mudaram de nome e outras antes eram ".html" e agora são ".php". Acontece que muitas dessas páginas antigas são bastante visitadas e eu não queria perder a visitação delas. Vou dar um exemplo. Tenho uma página chamada carros_minas-gerais.html que passará a ser chamar carros_minas-gerais.php. Como faço para esta página antiga não perder visitação? Pensei em mantê-la com um redirecionamento para a página nova via "refresh". E com o passar do tempo quando estas páginas antigas perderem visitação eu as deletaria. Está certo meu raciocínio ou não? Valeu
    • By juliosertori
      Olá boa noite, tudo bem galera?
       
      Tenho um input:
      <input type="text" value="0" name="qtdProds" id="qtdProds" class="form-control" onkeyup="atualizaTotalPrecos(this);" required /> E quando ele está ONBLUR, funciona o seguinte script:
      function atualizaTotalPrecos(sel){ var nameInput = sel.name; var IdNameProds = parseInt(nameInput.match(/\d/g).join('')); var valor = $('input[name="produtos_pdv['+IdNameProds+'][qtdProds]"]').val(); var custo = $('input[name="produtos_pdv['+IdNameProds+'][custoProds]"]').val(); var totalCusto = valor*custo; $("[name='produtos_pdv["+IdNameProds+"][custoTotalProds]']").val(totalCusto); //$("[name='totalPedidoDesconto']").val(totalCusto); var descontoPedido = $("#descontoPedido").maskMoney('unmasked')[0]; var total = 0; $('.somaTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) total += valor; }); var totalDescontado = total - descontoPedido; //alert(totalDescontado); $(".SomaTotalPrecos").maskMoney('mask', total); $(".totalpedidos").maskMoney('mask', totalDescontado); //////////////// var totalCusto = 0; $('.somaCustoTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) totalCusto += valor; }); $(".SomaTotalCustos").maskMoney('mask', totalCusto); };  
      Onde atualizo o campo .SomaTotalPrecos, funciona perfeitamente.
       
      Mas quando troco para Onkeyup, e inserir 1 por exemplo, primeiro ele preenche o campo com 0, e da segunda vez, ele atualiza para a primeira vez, ou seja, 1.
       
      Ex: coloco o valor de R$ 10,00 e na quantidade coloco 1, ele preenche o campo com 0, depois se insiro 2, ai ele preenche o campo com a quantidade anterior, ou seja 1xR$ 10,00
       
    • By AndersonWS
      Tenho um código que aparentemente estaria certo porém ele "trava" e  não mostra os resultados.
      Creio que o problema está na parte de "buscar" o json apenas.
      Segue o código:
      <style>.carregando{color:#666;display:none;}</style> <div class="col-md-7"> <label for="empreendimento">Escolha o empreendimento</label> <select name="empreendimento" class="form-control" required="" id="empreendimento"> <option value="">-- Escolha um empreendimento --</option> <?php $sqlVs = "SELECT `id`,`nm` FROM `empreend` WHERE `dis`='1' ORDER BY `nm` ASC"; $queryVs = mysqli_query($link, $sqlVs); $total = mysqli_num_rows($queryVs); if ($total > 0){ while($r = mysqli_fetch_array($queryVs)){ $id = $r['id']; $nm = $r['nm']; echo '<option value="'.$id.'">'.$nm.'</option>'; } } else { echo '<option value="0">Não há empreendimentos disponíveis</option>'; } ?> </select> </div> <div class="col-md-5"> <label for="unidades">Unidade</label> <span class="carregando">Aguarde, carregando...</span> <select name="unidades" id="unidades" class="form-control" required=""> <option value="">-- Escolha uma unidade --</option> </select> </div> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('jquery', '1.3'); </script> <script type="text/javascript"> $(function(){ $('#empreendimento').change(function(){ if( $(this).val() ) { $('#unidades').hide(); $('.carregando').show(); $.getJSON('ajax/busca_emp.php?search=',{empreendimento: $(this).val(), ajax: 'true'}, function(j){ var options = '<option value=""></option>'; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].id + '">' + j[i].nm + '</option>'; } $('#unidades').html(options).show(); $('.carregando').hide(); }); } else { $('#unidades').html('<option value="">– Escolha um empreendimento –</option>'); } }); }); </script> if(!empty($_GET["search"])) { $empreendimento = trim($_GET["search"]); $empreendimento = mysqli_real_escape_string($link, $empreendimento); $unidades = array(); $sqlVs = "SELECT `id`,`nm` FROM `empreendimento` WHERE `id`='$empreendimento' ORDER BY `nm` ASC"; $queryVs = mysqli_query($link, $sqlVs); $total = mysqli_num_rows($queryVs); if ($total > 0){ while($r = mysqli_fetch_array($queryVs)){ $unidades[] = array( 'id' => $r['id'], 'nm' => $r['nm'], ); } } echo( json_encode( $unidades ) ); } else { echo 'vazio'; } Ele trava e fica apenas mostrando:
      Aguarde, carregando...
       
      Olhei o json e ele está recuperando:
      [{"id":"1","nm":"Condominio"}]
    • By phpcoder
      OLÁ, gostaria de pegar os valores desses input e enviar no formulario apenas por um unico input hidden, um input com id diferente. Meu codigo está assim, gostaria de saber se é isso mesmo ou o que falta.
      input class="gp_input_grid" id="cod1" name="cod1" autofocus onKeyUp="javascript:pulacampo('cod1','cod2')" maxlength="1" type="tel" value="">
      input class="gp_input_grid" id="cod2" name="cod2" maxlength="1" onKeyUp="javascript:pulacampo('cod2','cod3')" type="tel" value=""
        
      input class="gp_input_grid" id="cod3" name="cod3" maxlength="1" onKeyUp="javascript:pulacampo('cod3','cod4')" type="tel" value="">
        input class="gp_input_grid" id="cod4" name="cod4" maxlength="1" onKeyUp="javascript:pulacampo('cod4','cod5')" type="tel" value=""
        input class="gp_input_grid" id="cod5" name="cod5" maxlength="1" onKeyUp="javascript:pulacampo('cod5','cod6')" type="tel" value=""
        
      input class="gp_input_grid" id="cod6" name="cod6" maxlength="1" onKeyUp="javascript:pulacampo('cod6','pulou')" type="tel" value=""
       
       input type="hidden" name="dados" id="dados" value="<?=$_POST['cod1']; ?><?=$_POST['cod2']; ?><?=$_POST['cod3']; ?><?=$_POST['cod4']; ?>"

      GOSTARIA DE SABER SE É ISSO MESMO, OU O QUE FALTA. 
×

Important Information

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