title: How to Set Offsett for Smooth Scroll
body: <p>I have implemented the <a href="http://css-tricks.com/examples/SmoothPageScroll/#top" rel="noreferrer">CSS Tricks Smooth Page Scroll</a> on <a href="http://mcography.com/test/" rel="noreferrer">my site</a> and it's working pretty nicely. However, because I have a fixed nav at the top of the page, when the page scrolls to the appropriate anchor div, the top of the div disappears behind the nav. How can I offset the scroll (about 70px) so that the whole div is shown? I tried doing this:  </p>
  
  <pre><code>var targetOffset = $target.offset().top - 70;
  </code></pre>
  
  <p>But that doesn't quite work. The page scrolls to the appropriate spot but then it immediately jumps back up so that the top of the div is hidden. What am I missing? Here's the code in full:</p>
  
  <pre><code>$(function() {
  
      function filterPath(string) {
          return string
          .replace(/^\//,'')
          .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
          .replace(/\/$/,'');
      }
  
      var locationPath = filterPath(location.pathname);
      var scrollElem = scrollableElement('html', 'body');
  
      // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
      $('a[href*=#]').each(function() {
  
          // Ensure it's a same-page link
          var thisPath = filterPath(this.pathname) || locationPath;
          if (  locationPath == thisPath
              &amp;&amp; (location.hostname == this.hostname || !this.hostname)
              &amp;&amp; this.hash.replace(/#/,'') ) {
  
                  // Ensure target exists
                  var $target = $(this.hash), target = this.hash;
                  if (target) {
  
                      // Find location of target
                      var targetOffset = $target.offset().top - 70;
                      $(this).click(function(event) {
  
                          // Prevent jump-down
                          event.preventDefault();
  
                          // Animate to target
                          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
  
                              // Set hash in URL after animation successful
                              location.hash = target;
  
                          });
                      });
                  }
          }
  
      });
  
  
      // Use the first element that is "scrollable"  (cross-browser fix?)
      function scrollableElement(els) {
          for (var i = 0, argLength = arguments.length; i &lt;argLength; i++) {
              var el = arguments[i],
              $scrollElement = $(el);
              if ($scrollElement.scrollTop()&gt; 0) {
                  return el;
              } else {
                  $scrollElement.scrollTop(1);
                  var isScrollable = $scrollElement.scrollTop()&gt; 0;
                  $scrollElement.scrollTop(0);
                  if (isScrollable) {
                      return el;
                  }
              }
          }
          return [];
      }
  
  });
  </code></pre>
  
  <p>Thanks in advance for your help.</p>