Anchor link to 50px above anchor

[Trojan]

Many site designs now have a static menu that remains at the top of the screen as the user scrolls down.

Is there a standard technique for dealing with the extra height this takes up when using an anchor text link?

I’m pretty sure this must be solved at this point, but I’m not using the right terms to find a solution.

E.g. in a setup like the following, clicking on the link does not display the anchor text:

Top of viewport
Static menu
Link to anchor
Paragraph 1
Anchortext
Paragraph 2
Paragraph 3

** click on Link to anchor **

Top of viewport
Static menu (Anchortext hidden behind)
Paragraph 2
Paragraph 3

Obviously one workaround is to fudge it by anchoring to Paragraph 1 in this example. Is there a better way?

[SamA74]

@Trojan

Is there a better way?

I’m not sure, it’s not a problem I’ve had to deal with. But one thing I have started doing is putting the ID for the anchor to target in the containing <section> element, rather than the heading, as I did before html5. So it’s like:-

<nav>Menu</nav>
<article>
 <h1>My Article</h1>
 <section id="intro">
  <h2>Introduction</h2>
  <p>Intro text.</p>
 </section>
 <section id="weasels">
  <h2>Weasels</h2>
  <p>All about weasels.</p>
 </section>
etc...

If you gave the section elements sufficient padding-top the heading may clear the menu. That’s if you don’t mind having a bit of a gap between sections. I’ve not tried this, it’s just a thought.

[PaulOB]

There is no easy css way other than offsetting the destination by the needed amount which could be awkward in existing pages. You could add the target before the detination and use absolute positoning with a negative top margin equal to the height of the header.

Here’s a rough example I just knocked up.

You can of course use js to offset the target.