juandahveed
9/28/2017 - 1:17 PM

Beautiful way to handle anchor links to any page and adding an offset to adjust where the scroll stops.

Beautiful way to handle anchor links to any page and adding an offset to adjust where the scroll stops.

anchor.js
content_copyfile_download
 (function($){

  // The function actually applying the offset
  function offsetAnchor() {
    if (location.hash.length !== 0) {
      window.scrollTo(window.scrollX, window.scrollY - 200);
    }
  }

  // Captures click events of all <a> elements with href starting with #
  $(document).on('click', 'a[href^="#"]', function(event) {
    // Click events are captured before hashchanges. Timeout
    // causes offsetAnchor to be called after the page jump.
    window.setTimeout(function() {
      offsetAnchor();
    }, 0);
  });

  // Set the offset when entering page with hash present in the url
  window.setTimeout(offsetAnchor, 0);

 })(jQuery);