Vertical pagination issue

Question

I have an issue I have manually made vertical pagination like page scroll to id in WordPress but when I click on the next number it scrolls on the previous section instead of scrolling on the next section while I set up accurate ids for the section but still I have this issue. Please help me, someone. This is html code.

<ul class="number-scroll">
<li class="active"><a class="scroll-link" href="#governance-main">1</a></li>
<li><a class="scroll-link" href="#directors">2</a></li>
<li><a class="scroll-link" href="#advisory">3</a></li>
<li><a class="scroll-link" href="#control-framework">4</a></li>
<li><a class="scroll-link" href="#control-framework2">5</a></li>

This is Jquery code

jQuery(document).ready(function( $ ){    
$('.number-scroll li').on('click',function(){
  $('.number-scroll li').removeClass('active');
  $(this).addClass('active');
 });
$(".scroll-link").click(function(e) {
  e.preventDefault();
  var id =  $(this).attr('href');
  $('html, body').animate({         
      scrollTop: $(id).offset().top-40
  }, 2000);

}); });