Плавная прокрутка Jquery

$(document).ready(function() { 
  $("#header").on("click", "button", function(event) { 
    let id = $(this).attr('href'); 
    let top = $(id).offset().top; 
    let heightOffset = ($(window).height() - $(id).height()) / 2; // вычислили смещение по высоте 
    if (heightOffset < 0) heightOffset = 0; // проверили, что не отрицательное 
    let centerTop = top - heightOffset; // отняли смещение 
    $('body,html').animate({ 
      scrollTop: centerTop 
    }, 1500); 
  }); 
});

div { 
  height: 300px; 
} 
#joinTo, 
.form { 
  background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header id="header"> 
  <button href="#header">Home</button> 
  <button href="#joinTo">How join to?</button> 
  <button href=".form">Contact Us</button> 
</header> 
<main> 
  <div></div> 
  <div id="joinTo"></div> 
  <div></div> 
  <div class="form"></div> 
  <div></div> 
</main>