Problems to anchor with jquery

Question

Hello, I’m making an application in angular 7, and I’m wanting to use anchors in the menus, as I found no way to do via typescript made through jquery but the anchorage does not work as expected, when I’m at the top of the page works smoothly, but when I click on one anchor and after another it does not go towards the id of the demarcated ancoma. I’d like your opinion on how I can solve this problem:

HTML:

<div class="collapse navbar-collapse" id="navbarSupportedContent-333">
  <ul class="navbar-nav ml-auto nav-flex-icons">
    <li class="nav-item">
      <a onclick="rolar_para('#section1')" class="scroll nav-link waves-effect waves-light link">O Tabaco</a>
    </li>
    <li class="nav-item">
      <a onclick="rolar_para('#section2')" class="scroll nav-link waves-effect waves-light link">
       Missão e Valores
      </a>
    </li>
    <li class="nav-item">
      <a onclick="rolar_para('#section3')" class="scroll nav-link waves-effect waves-light link">
        Quem somos
      </a>
    </li>
  </ul>
</div>

Jquery:

function rolar_para(elemento) {
  $('html, body').animate({
    scrollTop: $(elemento).offset().top
  }, 2000);
}