Cacher is the code snippet organizer for pro developers

 /* Smooth scroll to the pages block for Menu
  ==================================================*/
  
/*
  HTML file
  
  <nav class="nav" id="js-nav">
    <a href="#header" class="nav__item">Hosting</a>
    <a href="#domain" class="nav__item">Domains</a>
    <a href="#features" class="nav__item">features</a>
    <a href="#plans" class="nav__item">plans</a>
    <a href="#testimonials" class="nav__item">testimonials</a>
    <a href="#contacts" class="nav__item">contacts</a>
  </nav>

  <div id="header"></div>
  <div id="domain"></div>
  <div id="features"></div>
  <div id="plans"></div>
  <div id="testimonials"></div>
  <div id="contacts"></div>
  
*/

/* JS file
  ========================*/

//pluggable event listener to the menu items
$("#js-nav a").on("click", function(e) {

  // turn off default properties
  e.preventDefault();

  // get the value of the href attribute for the current element
  var currentBlock = $(this).attr("href");

  // find out the distance to the top of the units
  var currentBlockOffset = $(currentBlock).offset().top;

  // create a scrolling animation
  $("html, body").animate({
    scrollTop: currentBlockOffset - 20
  }, 500);

});