title: Using a smooth scroll snippet, center element in page
body: <p>I am using this script.</p>
  
  <pre><code>$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &amp;&amp; location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });
  </code></pre>
  
  <p>It is working well, except for one thing. When I click on the anchor, and get scrolled down, half of the text is cut off. I want to make an offset or something, so there is a little whitespace at the top of the screen above the text, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/d0rRr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d0rRr.jpg" alt="enter image description here"></a></p>
  
  <p>Currently, it looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/jSBKz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jSBKz.jpg" alt="enter image description here"></a></p>