More concise way of targeting menu links with scrollTop function for single page website?

Question

I have added a scrollTop function to each one on my single page websites anchor menu links (added through wordpress admin) and have assigned each a specific class for the scroll event but I have had to write the jQuery 4 times for each link. Is there a more concise way of selecting the specific classes in one function to then sleect the relevevant "#" each section is anchored as #section_1, #section_2 etc... How would i select the relevant link s1, s2, s3 etc... to know to scroll to its relevant section?

Thanks

The code

     $(document).ready(function (){
    $(".s1").click(function (){
        $('html, body').animate({
            scrollTop: $("#section_1").offset().top
        }, 1500);
    });
});

  $(document).ready(function (){
    $(".s2").click(function (){
        $('html, body').animate({
            scrollTop: $("#section_2").offset().top
        }, 1500);
    });
 });

  $(document).ready(function (){
    $(".s3").click(function (){
        $('html, body').animate({
            scrollTop: $("#section_3").offset().top
        }, 1500);
    });
 });

 $(document).ready(function (){
    $(".s4").click(function (){
        $('html, body').animate({
            scrollTop: $("#section_4").offset().top
        }, 1500);
    });
});

ADDED HTML

    <header class="header-wrapper">
                <h1 class="logo-text">Sell Garrard 301</h1>
                <div class="hamburger-helper">
                <div id="menu-toggle">
                    <div id="hamburger">
                      <span></span>
                      <span></span>
                      <span></span>
                    </div>
                    <div id="cross">
                      <span></span>
                      <span></span>
                    </div>
                </div>
                </div>
                <nav class="menu-hide">
                         <ul id="header_menu" class="menu-hide">
 <li id="menu-item-60" class="hide-list-item s1 menu-item menu-item-type-
 custom menu-item-object-custom menu-item-60"><a href="#section_1">Section 
 One</a></li>
 <li id="menu-item-53" class="hide-list-item s2 menu-item menu-item-type-
 custom menu-item-object-custom menu-item-53"><a href="#section_2">Section 
 Two</a></li>
 <li id="menu-item-61" class="hide-list-item s3 menu-item menu-item-type-
 custom menu-item-object-custom menu-item-61"><a href="#section_3">Section 
 Three</a></li>
 <li id="menu-item-62" class="hide-list-item s4 menu-item menu-item-type-
 custom menu-item-object-custom menu-item-62"><a href="#section_4">Section 
 Four</a></li>
 </ul>
                </nav>




            </header>

Answer 1

Using your current Wordpress menu

UPDATED - Added a debounce

jQuery

jQuery(document).ready(function(e) {

  //set variables
  var debounce;  
  var menuitems = $('#header_menu .menu-item a'); 

  // for each .menu-item a
  menuitems.each(function(){ 

      // on click of each a
      $(this).on('click',function(e){ 

      // remove default click
      e.preventDefault(); 

      // get the current href link and save a src variable
      var src = $(this).attr('href');

      // if animation is running stop it
      if (debounce) clearTimeout(debounce);

          // create animation
          debounce = setTimeout(function(){
              debounce = null;
              $('html, body').animate({
                   //add src varable from earlier
                    scrollTop: $(''+src+'').offset().top
              }, 1500);
          });
      });
 });

});

working example - https://jsfiddle.net/Jim_Miraidev/vuyjgzyj/

HTML

<ul id="header_menu">
    <li class="menu-item s1"><a href="#section_1">menu item 1</a></li>
    <li class="menu-item s2"><a href="#section_2">menu item 2</a></li>
    <li class="menu-item s3"><a href="#section_3">menu item 3</a></li>
</ul>


<div id="section_2">content 1</div>
<div id="section_2">content 2</div>
<div id="section_3">content 3</div>

Another option would be to create a function

var debounce; 

function myScrollTo($button,$div){
     $($button).on('click',function(e){ 
         e.preventDefault();   
         if (debounce) clearTimeout(debounce);
            debounce = setTimeout(function(){
              debounce = null;
              $('html, body').animate({
                      scrollTop: $($div).offset().top
              }, 1500);
          });
     });
}
//fire function for each
myScrollTo('.s1 a','#section_1');
myScrollTo('.s2 a','#section_2'); 
myScrollTo('.s3 a','#section_3');

Answer 2

Here's a working example

Basically, you get the href value of the link (must be the same as the section id) and link to that element. No classes needed.

Javascript

$(document).ready(function() {
  $('.menu a').on('click', function() {
    var t = $(this);

    $('html, body').animate({
      scrollTop: $(t.attr('href')).offset().top
    }, 1500);


    return false;
  });
});

HTML

<ul class="menu">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div class="sections">
  <div id="section1" class="section">Section 1</div>
  <div id="section2" class="section">Section 2</div>
  <div id="section3" class="section">Section 3</div>
</div>