title: Add Margin on Smooth Scroll
body: <p>I am adding smoothscrolling to my one-page freelance site.
  Whenever it scrolls to the page it shows 60px from the top of the section bc of the fix-top nav as you scroll looking like this when it scrolls down</p>
  
  <p><a href="https://i.stack.imgur.com/BfyG3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BfyG3.png" alt="this"></a></p>
  
  <p>When I'd like it to push 60px down and scroll down to look like this instead.</p>
  
  <p><a href="https://i.stack.imgur.com/tdOl8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tdOl8.png" alt="enter image description here"></a></p>
  
  <p>I pulled scroll code from w3 bc their solution seems the simplest.  Just starting to use jquery more so any help would be greatly appreciate.
  Code used below:</p>
  
  <pre><code>    &lt;script&gt;
    $(document).ready(function(){
      $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
  
      if (this.hash !== "") {
  
        event.preventDefault();
  
        var hash = this.hash;
  
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 1100, function(){
  
          window.location.hash = hash;
          });
        } // End if
      });
    })
  &lt;/script&gt;
  </code></pre>