How to implement a smooth transition on the anchor link?

Question

JavaScript

there is a menu

<ul class="menu-order">
            <li>
              <a href="#1">1</a>
            </li>
            <li>
              <a href="#2">2</a>
            </li>
            <li>
              <a href="#3">3</a>
            </li>
            <li>
              <a href="#4">4</a>
            </li>
          </ul>

and blocks with corresponding id. How to implement a smooth transition to an anchor?

Answer 1

$(document).on('click', '.menu-order li a', function() {
  var linkID = $(this).attr('href');
  $('html, body').animate({ 
    scrollTop: $(linkID).offset().top 
  }, 'slow');
});

Answer 2

HERE is a link to codepen on native, the function is for all occasions

Answer 3

$(".menu-order li a").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 750,
      easing: "swing"
    });
    return false;
  });