Problems with scrolling href to content on the same page in smaller resolutions

Question

My problem is this.

<a href="#saibamais" class="scroll-to">
  Saiba Mais
</a>

<div id="saibamais"></div>

$('a.scroll-to').on('click', function (e) {
   e.preventDefault();
$('html,body').animate({scrollTop: ($($(this).attr('href')).offset().top - 0)}, 600);});

On screens larger than 992 works normally, but changing the resolution from 992 down no longer works.

Answer 1

Strange here on the site is working perfectly.

$('a.scroll-to').on('click', function() {
  $('html,body').animate({
     scrollTop: ($($(this).attr('href')).offset().top - 0)
  }, 600);
});

#saibamais{
  margin-top: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#saibamais" class="scroll-to">
  Saiba Mais
</a>

<div id="saibamais">DIV SAIBAMAIS</div>