Jump to content
Elson Lima

Rolagem suave em conteudo de div

Recommended Posts

Tenho um script que faz uma rolagem suave ao clicar no link com âncora. O problema é que ele rola a página toda. Preciso que ele role somente o conteúdo que está dentro de uma div específica e o resto da página permaneça fixa. Alguém pode ajudar?

 

Segue codigo que tenho:

$(".scrollSuave").click(function(event){
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top - 00
    }, 500);
})
<div class="col-lg-3">
    <a href="#" class="list-group-item active">
        TÓPICOS DA AJUDA
    </a>
    <a href="#funcionamento" class="list-group-item scrollSuave">Opção 1</a>
    <a href="#cadastrar" class="list-group-item scrollSuave">Opçao 2</a>
</div>

<hr>
<!--  O CONTEUDO DESTA DIV QUE DEVE ROLAR O CLICAR NO LINK -->
<div class="col-lg-9">
<h4 id="funcionamento"><b>Opção 1</b></h4>
texto aqui

<h4 id="cadastrar"><b>Opção 1</b></h4>
texto aqui

</div>

print da pagina para facilitar

Untitled-1.jpg

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 ernestovm
      Seguinte. Eu não, mas acho que TODOS os desenvolvedores estão no mato sem cachorro no que se refere a esse problemão, que é a atualização do site lá no browser do seu usuário/visitante. Seja no acesso pelo computador e, pior ainda, pelo celular.
      Quando altero o arquivo stylo.css ou alguma imagem o browser, principlmente o Google Chrome NÃO ATUALIZA. No computador, só atualiza se eu teclar CTRL+F5, mas se pensarmos no visitante não dá né? "Nivelando por baixo", imagine aquele visitante do seu site que não entende bulufas... Vou ter que colocar no site um aviso pra todo mundo apertar CTRL+F5 para atualizar a página? Quando? Sempre? Um INFERNO.
      E quanto ao acesso do visitante pelo celular? Pior ainda.
      Então estou à procura de uma solução transparente ao usuário. No que se refere às imagens, encontrei soluções razoáveis, mas quanto ao arquivo CSS, nada encontrei.
      Se alguém souber de alguma "mágica" que resolva esse problema, compartilhe. TODOS os demais desenvolvedores agradecem.
      Obrigado
       
    • By Sapinn
      Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
       
      Codigo js 
       
      window.onscroll = function(){
          var top = window.pageXOffset || document.documentElement.scrollTop
          var barra = document.querySelector(".barra");
          if(top > 900){
              barra.style.display = 'flex';
      //aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
              barra.classList.add('transition');
          }else{
             barra.style.display = 'none';
          }
      }
       
       
      Codigo css
      .barra{
          width: 100%;
          height: 70px;
          background-color: #090b13;
          display: none;
          justify-content: space-between;
          position: fixed;
          opacity: 0;
      }
      .transition{
          transition: 1s;
          opacity: 0.7;
          
      }
       
      codigo HTML
       
      <div class="barra" >
              <img src="assets/images/logo-nopad.svg" alt="">
              <button class="botao-assinatura-header">Assine Agora</button>
        </div>
       
       
    • By henriquers
      Estou com um problema com o Select2, ele tem um campo de busca mas não esta filtrando corretamente e não estou entendo o motivo, sem utilizar o AJAX colocando os options manualmente ele funciona corretamente, mas trazendo os dados via AJAX ele não funciona o campo de busca.
      Se aguem poder me dar uma luz agradeço a ajuda.
       

       
      Nessa imagem estou tentando filtrar apenas para os itens que tenha LUVA na descrição, mas não funciona, posso colocar qual quer coisa que ele não faz o filtro
       
      Abaixo segue meu codigo
       
      HTML
      <!DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE> Select2 </TITLE> <link href="select2/select2.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/> <script> $(document).ready(function(){ $("#selUser").select2({ language: "pt-br", ajax: { url: "get_dados.php", type: "GET", dataType: 'json', delay: 200, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (response) { return { results: response }; }, cache: true }, width: "20%", closeOnSelect: true, }); }); </script> </head> <body> <select id='selUser' style='width: 200px;'> <option value='0'>- Search user -</option> </select> </body> </html> get_dados.php
      <?php include './conn_orcl.php'; $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT' ORDER BY DESCRICAO"; $parse=oci_parse($conn,$select); oci_execute($parse); $data = array(); while($row=oci_fetch_array($parse)){ $data[] = array("id"=>$row['PRODUTO'], "text"=>$row['PRODUTO']." - ".$row['DESCRICAO']); }; echo json_encode($data); ob_end_flush(); oci_free_statement($parse); oci_close($conn); ?>  
    • By Sapinn
      Tenho um código de um balão de borda feito com html e css mas gostaria de saber como fazer para colocar a seta que está virada para baixo em cima do balão
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              body {
          padding: 140px 10px;
          text-align: center;
      }
      /* Criando o balão */
      .bubble {
          background-color: #fff;
          border: 2px solid #333;
          border-radius: 5px;
          color: #333;
          display: inline-block;
          font: 16px/24px sans-serif;
          padding: 12px 24px;
          position: absolute;
      }
      /* Criando o triângulo */
      .bubble.active:after,
      .bubble.active:before {
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 15px solid #fff;
          bottom: -15px;
          content: '';
          left: 80%;
          margin-left: -15px;
          position: absolute;
      }
      /* Criando a borda do triângulo */
      .bubble.active:before {
          border-left: 18px solid transparent;
          border-right: 18px solid transparent;
          border-top: 18px solid;
          border-top-color: inherit;
          bottom: -18px;
          margin-left: -18px;
      }
          </style>
      </head>
      <body>
          <span class="bubble active">Balão com borda</span>
      </body>
      </html>
       
×

Important Information

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