Offsetting an HTML Anchor to Adjust For Fixed Header

Offsetting Anchor Links with Fixed Header

You could include padding-top and then use negative margin-top to balance it out.

jsFiddle

h2 {
    padding-top: 70px;
    margin-top: -70px;
}

How do I offset an anchor to adjust for a fixed header when linking from other pages?

I found an answer. This fixed the issue - setting a timeout to the execution:

// Navigation Anchor with correct margin to display sections
(function (document, history, location) {
  var HISTORY_SUPPORT = !!(history && history.pushState);
  var anchorScrolls = {
    //ANCHOR_REGEX: /^#[^ ]+$/
    ANCHOR_REGEX: /^[\/a-z0-9-.]*#[^\s]+$/,
    OFFSET_HEIGHT_PX: 58,

    /**
     * Establish events, and fix initial scroll position if a hash is provided.
     */
    init: function () {
      this.scrollToCurrent();
      window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
      document.body.addEventListener('click', this.delegateAnchors.bind(this));
    },

    /**
     * Return the offset amount to deduct from the normal scroll position.
     * Modify as appropriate to allow for dynamic calculations
     */
    getFixedOffset: function () {
      return this.OFFSET_HEIGHT_PX;
    },

    /**
     * If the provided href is an anchor which resolves to an element on the
     * page, scroll to it.
     * @param  {String} href
     * @return {Boolean} - Was the href an anchor.
     */
    scrollIfAnchor: function (href, pushToHistory) {
      var match, rect, anchorOffset;

      if (!this.ANCHOR_REGEX.test(href)) {
        return false;
      }
      match = document.getElementById(href.slice(1));

      if (match) {
        rect = match.getBoundingClientRect();

        anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();

        if (pushToHistory) {
          window.scrollTo(window.pageXOffset, anchorOffset);
        } else {
          // Allow page content to load
          setTimeout(function () {
            window.scrollTo(window.pageXOffset, anchorOffset);
          }, 40);
        }

        // Add the state to history as-per normal anchor links
        if (HISTORY_SUPPORT && pushToHistory) {
          history.pushState({}, document.title, location.pathname + href);
        }
      }
      return !!match;
    },

    /**
     * Attempt to scroll to the current location's hash.
     */
    scrollToCurrent: function () {
      this.scrollIfAnchor(window.location.hash);
    },

    /**
     * If the click event's target was an anchor, fix the scroll position.
     */
    delegateAnchors: function (e) {
      var elem = e.target;

      if (
        elem.nodeName === 'A' &&
        this.scrollIfAnchor(elem.getAttribute('href'), true)
      ) {
        e.preventDefault();
      }
    }
  };

  window.addEventListener(
    'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
  );
})(window.document, window.history, window.location);

Fixed page header overlaps in-page anchors

I had the same problem.
I solved it by adding a class to the anchor element with the topbar height as the padding-top value.

<h1><a class="anchor" name="barlink">Bar</a></h1>

I used this CSS:

.anchor { padding-top: 90px; }

Anchor links do not redirect to correct position on the webpage

Without being able to see the entire screen, it sounds like your header could be the issue. The anchors are working but with a sticky header, the content will always be behind it. Padding may correct this. The padding is added to the content to account for the height of the sticky header or as Chase mentioned, using scroll padding.

---

Related Topics