Scroll by click of the button

Demo for https://toster.ru/q/309702

by Gleb Kemarsky

HTML

<button id="to-contacts">Go to Contacts</button>

<h1>Header</h1>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>

<h2>Subheader 1</h2>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>

<h2>Subheader 2</h2>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>

<h2 id="contacts">Contacts</h2>
<p>Phone</p>
<p>Email</p>
<p>Address</p>
<img width="400" height="300" alt="Map" />

<button id="to-top">Go to Top</button>

CSS

h1, h2, #to-top {
  margin-top: 48px;
}
img {
  background-color: #ddd;
  border: 1px solid #999;
  display: block;
}

JavaScript

$(document).ready(function(){
  var body = $("html, body");
  var to_contacts = $("#to-contacts");
  var to_top = $("#to-top");

  var offset = 20;
  var scroll_to = $("#contacts").offset().top - offset;

  // slow scrolling: duration is 1500 ms
  to_contacts.click(function(event){
    body.stop().animate({scrollTop: scroll_to}, 1500);
  });
  to_top.click(function(event){
    body.stop().animate({scrollTop: 0}, 1500);
  });
});//jQuery