html {
  scroll-behavior: smooth;
}

The scroll-behavior CSS property sets the behavior for a scrolling box

As default it's

auto

but if we use scroll-behavior: smooth; the scroll will be animated and smooth. In HTML

<div class="main" id="section1">
  <h2>Section 1</h2>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
</div>

Div's must have specified

id="someid" 

which will be passed in a href attribute.

<a href="#someid">1</a>

With Jquery we can make it more manageable. We can specify exact pixels and positions.

let id = $(this).closest('li').attr('id');

$('html, body').animate({
                 scrollTop: $('div#section-content-'+id).offset().top - 200
             }, 1000);