Smooth scrolling in div content

Question

Smooth scrolling in div content

Navigation

#1 by (0 votes)

2

I have a script that does a smooth scrolling when clicking on the link with anchor. The problem is that it scrolls the whole page. I need it to scroll only the content that is within a specific div and the rest of the page remain fixed. Can anyone help?

I have the following code:

$(".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>

Maybe I did not get it right. Follow the print of the page.

javascript jquery div rolamento

asked by anonymous 18.11.2017 / 22:17

1 answer

PDF in Binary DOMPDF laravel I can only resolve dependencies if I use '+' in the versions of the Libraries

score 0 · Answer 1

This function does what you want, just adjust the selectors to the elements of your code.

A working example:

$(".scrollSuave").click(function(event){
    event.preventDefault();

   var div_anc = $($.attr(this, 'href'));
   var div_anc_top = div_anc.offset().top;

   go_top = div_anc_top < 0 ? $("#div").scrollTop()-Math.abs(div_anc_top) : div_anc_top+$("#div").scrollTop();

    $("#div").animate({
        scrollTop: go_top-10 // 10 é o padding da div-mãe
    }, 500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divstyle="display: block; width: 100px; background: #ddd; padding: 10px; float: left; margin-right: 20px;">
   <a href="#funcionamento" class="scrollSuave">Opção 1</a>
   <br />
   <a href="#cadastrar" class="scrollSuave">Opção 2</a>
   <br />
   <a href="#teste" class="scrollSuave">Opção 3</a>
</div>

<div id="div" style="display: block; width: 400px; height: 400px; overflow: hidden; background: yellow; padding: 10px; float: left;">
   <h4 id="funcionamento"><b>Opção 1</b></h4>
   Nullam dapibus orci nec ligula imperdiet feugiat. Quisque diam dui, tempus in nisi ac, lobortis dignissim eros. Vestibulum bibendum dapibus lectus, sed auctor erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis, magna a efficitur porta, tellus quam molestie felis, a porttitor diam nisi sed velit. Proin sed porta magna. Praesent efficitur rhoncus massa, quis luctus turpis fringilla in. Etiam ultricies lorem sed libero vehicula viverra. Sed dapibus porta pulvinar. Nam tempor, urna non commodo aliquam, lectus lacus consequat lacus, tincidunt ultricies odio lacus eu nulla. Pellentesque tincidunt tincidunt quam, sed malesuada risus feugiat at. Donec id ante vitae tortor malesuada ultricies. Suspendisse tempus tellus in nisl consectetur, ut ornare ipsum elementum.
   
   <h4 id="cadastrar"><b>Opção 2</b></h4>
   Nullam dapibus orci nec ligula imperdiet feugiat. Quisque diam dui, tempus in nisi ac, lobortis dignissim eros. Vestibulum bibendum dapibus lectus, sed auctor erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis, magna a efficitur porta, tellus quam molestie felis, a porttitor diam nisi sed velit. Proin sed porta magna. Praesent efficitur rhoncus massa, quis luctus turpis fringilla in. Etiam ultricies lorem sed libero vehicula viverra. Sed dapibus porta pulvinar. Nam tempor, urna non commodo aliquam, lectus lacus consequat lacus, tincidunt ultricies odio lacus eu nulla. Pellentesque tincidunt tincidunt quam, sed malesuada risus feugiat at. Donec id ante vitae tortor malesuada ultricies. Suspendisse tempus tellus in nisl consectetur, ut ornare ipsum elementum.

   <h4 id="teste"><b>Opção 3</b></h4>
   Nullam dapibus orci nec ligula imperdiet feugiat. Quisque diam dui, tempus in nisi ac, lobortis dignissim eros. Vestibulum bibendum dapibus lectus, sed auctor erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis, magna a efficitur porta, tellus quam molestie felis, a porttitor diam nisi sed velit. Proin sed porta magna. Praesent efficitur rhoncus massa, quis luctus turpis fringilla in. Etiam ultricies lorem sed libero vehicula viverra. Sed dapibus porta pulvinar. Nam tempor, urna non commodo aliquam, lectus lacus consequat lacus, tincidunt ultricies odio lacus eu nulla. Pellentesque tincidunt tincidunt quam, sed malesuada risus feugiat at. Donec id ante vitae tortor malesuada ultricies. Suspendisse tempus tellus in nisl consectetur, ut ornare ipsum elementum.
   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>