Scroll to #hash with margin top

by Faisal Khan Janjua

HTML

<div class="nav">
	<a href="#a1">go to 1</a>
	<a href="#a2">go to 2</a>
	<a href="#a3">go to 3</a>
	<a href="#a4">go to 4</a>
	<a href="#a5">go to 5</a>
	<a href="#a6">go to 6</a>
</div>
<ul>
    <li id="a1">1</li>
    <li id="a2">2</li>
    <li id="a3">3</li>
    <li id="a4">4</li>
    <li id="a5">5</li>
    <li id="a6">6</li>
</ul>

CSS

.nav{ position:fixed; height:30px; width:100%; top:0; background:rgba(255,0,0,0.5); }

ul {
  padding-top: 30px;
}
li{ margin-bottom:200px; padding:10px; background:green; }

JavaScript

$('a').on('click', function() {
    var id = $(this).attr('href');
    $('html, body').animate({scrollTop: $(id).offset().top - 30}); // scroll to the id of the clicked link - height of the fixed nav
});