Smooth scrolling in div content

Question

I have a script that scrolls smoothly when clicking on the anchor link. The problem is that it scrolls the entire page. I need him to scroll only the contents inside a div specific and the rest of the page remains fixed. Someone can 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 couldn’t explain it right. Follow the page print.

Answer 1

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

A functional 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>
<div style="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>