Friendly Anchor Link

An anchor link is sometimes referred to as a scroll-to link or a jump link. The anchor link scrolls the web page to the spot on the page that has a matching id attribute.

To clarify, an h3 tag might have an id="my-spot" attribute. Thus, clicking a link with a #my-spot anchor (<a href="#my-spot">) will scroll the browser window to the <h3 id="my-spot"> tag.

Any HTML tag with an id value can be anchor-linked to. Example:

A link to the "Salle May" paragraph.

Salle May knew about the reward for her head. She had been told that the village she was raised in had issued it. But she didn't realize it would bring out every wannabe murderer who ever successfully threw a knife at a tree trunk.

The source code of the above:

<p>
<a href="#my-spot">A link to the "Salle May" paragraph.</a>
</p>

<p id="my-spot" style="border-left:6px solid #ccc; padding-left:6px; border-top-left-radius:12px; border-bottom-left-radius:12px;">
Salle May knew about the reward for her head. She had been told that the village she was raised in had issued it. But she didn't realize it would bring out every wannabe murderer who ever successfully threw a knife at a tree trunk.
</p>

Making it Friendly

When the browser scrolls to an HTML tag with the relevant id value, the content of the HTML tag is butted up tightly against the top of the browser window. That scrolling position might not be what you prefer.

To bring the content of the HTML tag down just a tad, a special div can be scrolled to instead. It's an empty div with a position:relative; top:-1.5em; CSS style. (Change -1.5em to however much space you want.) When the browser scrolls to that particular div, the scrolling will stop at the position of the div.

Example:

A link to an empty div above Stuff Heading.

Stuff Heading

When you tap the above link, the browser will scroll with 1.5em space above the heading.

Here is the source code.

<p>
<a href="#another-spot">A link to an empty div above Stuff Heading.</a>
</p>

<div id="another-spot" style="position:relative; top:-1.5em;"></div>

<h3 style="border-left:6px solid #ccc; padding-left:6px; border-top-left-radius:12px; border-bottom-left-radius:12px;">
Stuff Heading
</h3>

It's actually nothing new. Simple, though.

When you want space above the normal scroll point of an anchor link, then link to the id of something above it instead.

If you want only a little bit of space above the normal scroll point, insert an empty div positioned so the scroll point is where you want it.

(This content first appeared in Possibilities newsletter.)

Will Bontrager