[Solved-6 Solutions] Offsetting an html anchor to adjust for fixed header - javascript tutorial



Problem:

How offsetting an html anchor to adjust for fixed header ?

Solution 1:

For this problem to given a perfect solution in the CSS style sheet.

:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

Note: 90px is the height of the fixed header margin and padding.

Solution 2:

Here you can use CSS without any JavaScript.

<a class="wikitechy" id="top"></a>

Position an anchor tag offset to be higher or lower appears on the page, to make a block element and relatively positioning it.

a.wikitechy {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

Note: -250px will be position an anchor up to 250px

Solution 3:

<a name="wikitechy">
    <h1 style="padding-top: 40px; margin-top: -40px;">Wikitechy</h1>
</a>

Solution 4:

<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>

And below that the headings where it should go to.

<h3>one</h3>
<p>Content Here</p>

<h3>two</h3>
<p> Content Here</p>

<h3>three</h3>
<p> Content Here</p>

<h3>four</h3>
<p> Content Here</p>

Now because we have a fixed menu at top of the page we can't make it go to tag because that would be behind the menu. In its place put a span tag inside the tag with the proper id.

<h3><span id="one"></span>one</h3>

Now use css code to position them properly.

h3
{ 
position:relative;
 }

h3 span
{ 
position:absolute; 
top:-200px;
}

Change the top value to match the height of your fixed header (or more).

Solution 5:

.getFixedOffset() method if dynamic calculations are required. Here you can use jQuery:

(function(document, history, location) {
  var HISTORY_SUPPORT = !!(history && history.pushState);

  var anchorScrolls = {
    ANCHOR_REGEX: /^#[^ ]+$/,
    OFFSET_HEIGHT_PX: 50,

    /**
     * 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();
        window.scrollTo(window.pageXOffset, anchorOffset);

        // 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);

Solution 6:

CSS:

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}


Related Searches to offsetting an html anchor to adjust for fixed header - javascript tutorial