[Resolved] Offset anchors with fixed header

[theonetruevlad]

When I use jump links the anchor is at the top of the page which is no good as it sits behind the fixed header. I need to offset the anchor position so it is visible. This needs to work when it is a #anchor item in the URL.

I have tried a CSS solution but I have not managed to get it to work.

This is the anchor location that needs to be jumped to.
<h2 id=”section1″ class=”offset”>Section I Heading</h2>

This is the custom CSS to give it an offset.
.offset:before {
display: block;
content: ” “;
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}

I have seen suggestions of using these as well
position: relative;
vertical-align: top;
z-index: -1; /* This prevents any links being behind the offset block and un-clickable */

This doesn’t work, it is in my Custom CSS plugin area.

The other option is Java script, but I don’t know where to stick it and not have it interfere with the code for the sticky header.

/**
* Check an href for an anchor. If exists, and in document, scroll to it.
* If href argument omitted, assumes context (this) is HTML Element,
* which will be the case when invoked by jQuery after an event
*/
function scroll_if_anchor(href) {
href = typeof(href) == “string” ? href : $(this).attr(“href”);

// If href missing, ignore
if(!href) return;

// You could easily calculate this dynamically if you prefer
var fromTop = 50;

// If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
// Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
var $target = $(href);

// Older browsers without pushState might flicker here, as they momentarily
// jump to the wrong position (IE < 10)
if($target.length) {
$(‘html, body’).animate({ scrollTop: $target.offset().top – fromTop });
if(history && “pushState” in history) {
history.pushState({}, document.title, window.location.pathname + href);
return false;
}
}
}

// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);

// Intercept all anchor clicks
$(“body”).on(“click”, “a[href^=’#’]”, scroll_if_anchor);

I hope this is a nice interesting challenge rather than an epic hassle, cheers

[Tom]

Javascript is the best way to go for you.

You can add it to GP Hooks in the wp_footer hook.

Make sure to wrap the above JS in script tags like this:

<script>
// Your JS in here
</script>

[xyz]

Hi Tom,

I just pasted the above javascript into the wp_footer hook and ticked execute PHP. But I can’t see any difference.

Is there something else I need to do?

[Tom]

Try this instead: https://jsfiddle.net/ianclark001/aShQL/

[xyz]

no, that didn’t appear to work.

[Tom]

I’ve been trying to work this into the plugin itself – it’s very hard to get any consistent results I’m afraid.

This topic might help: http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header

[xyz]

Thanks Tom, this looks like it could be something that’d work. I’ll let you know.

[xyz]

Hi Tom,

this is one of my anchors, placed before a heading.

<h2><span style=”color: #1e72bd; font-size: 14pt;”>Economics and economists</span></h2>

I have tried adding
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
in various places and it hasn’t worked. I’ve tried encasing it in below it and it hasn’t worked.

Any chance you could let me know exactly what I need to paste in and where?

Thanks

[xyz]

…sorry, should have been this…
<h2><span style=”color: #1e72bd; font-size: 14pt;”>Economics and economists</span></h2>

[xyz]

hnnnnn,
it’s still missing the anchor when I copy and paste
sits immediately before Economics

[xyz]

oh for pete’s sake
“<.a id=”economics”</a.>” without the fullstops and quotation marks

[Tom]

I’m pretty sure to the a.anchor CSS needs to be coupled with an anchor like this:

<a class="anchor"><!-- anchor in the page --></a>

That should work 🙂

[xyz]

sorry Tom, still not entirely sure where to put everything. I understand that were trying to tell it that it needs to jump to the anchor and then adjust it’s position relative to the anchor.

Here’s what I have so far.

At the top of the page:
“<span style=”font-size: 11pt;”>Economics and economists</span>”

waaaaaay down the bottom of the page, the position I want to jump to:
“<h2> Economics and economists</h2>”

If you could let me know *exactly* how to change the CSS, as I’m just dipping my big toe in all this, I’d be grateful. I’m happy to tweak the pixel offset distance, I just need to get it to work first.

[xyz]

I suspect for my sanity and yours, it would be good if you could let me know what I need to do to paste exact code in these messages… sorry for doing the complete newbie at you over so many messages

[Tom]

If you highlight your code and click the “code” button in the editor above, it will make it a lot easier to post.

So at the top, you would have:

<a href="#my-section">My section</a>

Then you would have your section:

<a name="my-section class="anchor"><!-- a section --></a>

Then this CSS:

a.anchor {
    display: block;
    position: relative;
    top: -60px; /* height of sticky navigation */
    visibility: hidden;
}

• This reply was modified 8 years, 7 months ago by Tom.

[Author]

Posts