Anchor Links and Scroll Positions

A tapped anchor link loads the destination page and scrolls it so that a certain spot is at the top of the browser window.

ID Anchor — The position is marked with an id value. It is called an anchor. We'll refer to it as an "id anchor" to differentiate from an "anchor link."

Anchor Link — The anchor link is a regular link but with a # character and the id anchor value appended to the URL.

The page with the id anchor may be the same page where the anchor link is located or it may be another page on the internet. If the same page, the page might not be reloaded but just scrolled to position.

Tweak — When the browser scrolls the page to the position of the id anchor, it is scrolled tightly against the top of the browser window.

However, it doesn't necessarily have to be crowded against the top of the browser window. The position can be tweaked.

(If the page is too short for the id anchor to be at the top, the browser stops scrolling at the end of the page.)

Creating an ID Anchor

An id anchor can be placed in any HTML tag that accepts the id attribute. Examples are the p, div, td, and span tags.

Here is an example.

<p id="I-mark-a-spot">

I-mark-a-spot is the id anchor value.

Creating an Anchor Link

The URL of an anchor link has a # character appended and then the id anchor value.

Here is an example.

<a href="http://example.com/page.php#I-mark-a-spot">Tap me</a>

Note that the I-mark-a-spot value of the anchor link is identical to the I-mark-a-spot value of the id anchor.

An Illustration

As an illustration, this paragraph has been given an id anchor and an anchor link. The anchor link text is Click this link, which scrolls the page to the position of the id anchor. Click the link to see it work. The browser will scroll down until this paragraph is immediately below the top of the page.

Here is the code in the paragraph.

<p id="illustration-1">
As an illustration, this paragraph has been given 
an id anchor and an anchor link. The anchor link text 
is <a href="#illustration-1">Click this link</a>, which 
scrolls the page to the position of the id anchor. 
Click the link to see it work. The browser will scroll 
down until this paragraph is immediately below the top 
of the page.
</p>

When you click on the link in that paragraph, you'll notice the browser scrolls down until the id anchor position is tightly against the top of the page.

That may be just right or acceptable for most web pages. But for some, a bit more space at the top would make things seem less crowded.

A Tweak

A conundrum when inserting space to make a browser scroll to a few pixels above the preferred location is that the space would be visible on the page even when no anchor link was clicked.

For the tweak, then, something is used that already exists.

When this tweak is implemented, it causes the page to scroll to the last part of the previous element, the one immediately before the element one wants to scroll to.

The element to display at the top of the page is then down from the top edge. The scroll-to position is the last part of the previous element.

To do that, put the last word in the previous element into a span tag. The span tag around the last word has the id anchor.

As an illustration, the above paragraph has a span tag id anchor around the last word of the paragraph. Click here to scroll the page to the last part of the above paragraph.

Here is the code for those two paragraphs.

<p>
To do that, put the last word in the previous element 
into a span tag. The span tag around the last word has 
the id <span id="illustration-2">anchor.</span>
</p>
<p>
As an illustration, the above paragraph has a span tag 
id anchor around the last word of the paragraph. 
<a href="#illustration-2">Click here</a> to scroll 
the page to the last part of the above paragraph.

</p>

If you need to open up a little space above the anchor element, the "span tag id anchor around the last word of the previous element" tweak should do the job.

(This article first appeared in Possibilities newsletter.)

Will Bontrager