$(document).ready(function(){
var offset = 20;
var scroll_to = $("#contacts").offset().top - offset;
$("#to-contacts").click(function(event){
// slow scrolling: duration is 1500 ms
$("html, body").stop().animate({scrollTop: scroll_to}, 1500);
});
});//jQuery
<button id="to-contacts">Go to Contacts</button>
<h1>Header</h1>
<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" />
https://jsfiddle.net/glebkema/2s845d6e/
Пояснение к скрипту:
Вычислив координату нужного заголовка, следует вычесть из неё небольшую поправку. Тогда страница остановится чуть-чуть выше заголовка, и его будет удобнее читать.
