[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;
}