Jump Link Tips
A jump link is a link that scrolls a web page to a different point in the browser.
As an example, clicking here will scroll the page to the New Jump Link Destination Marker section of this article. (Use your browser's "back" button to jump back up here.)
For many years, HTML's a-tag name attribute was used for creating jump links. Well, it still is. However, it's not supported in HTML 5.
The HTML standards group does pretty good with looking into the future to determine how tags are likely to be used and what else is likely to be needed. Alas, they seem occasionally to be out of tune with their psychic self.
Because the standards group turns out to be human, we get to convert our a-tag name jump link destination markers to any-tag id jump link destination markers. (The "any-tag id" means the id of any HTML tag that can have an id attribute.)
A jump link has two parts: (i) The clickable jump link . (ii) The jump link destination marker.
The Clickable Jump Link
The clickable jump link is identical for both the old a-tag and the new any-tag types of jump links. Example:
<a href="#aplacetogo">Click here</a>
The text following the "#" symbol of the href attribute (colored blue) is the jump link identification. That identification is used as the marker at the jump link destination, the point the browser should scroll to when the link is clicked.
The "#" symbol preceding the jump link identification tells the browser the link is to a location on the same page, not elsewhere on the internet.
For perspective, I'll provide a short description of the a-tag name jump link destination marker before describing how to use the any-tag id one.
Old Jump Link Destination Marker
The old jump link destination marker was constructed with the a-tag name attribute. Example:
<a name="aplacetogo"></a>
The jump link destination contains the jump link identification marker (colored blue).
The marker isn't preceded with a "#" character. The "#" character is used only in the clickable jump link.
Now, let's look at the any-tag id attribute method to mark a jump link destination.
New Jump Link Destination Marker
With the new method, the clickable jump link will scroll the page to any id value that matches the jump link identification in the clickable link. Here are a few examples:
<h1 id="aplacetogo1">[content optional]</h1> <td id="aplacetogo2">[content optional]</td> <div id="aplacetogo3">[content optional]</div> <span id="aplacetogo4">[content optional]</span> <a href="http://example.com" id="aplacetogo5">[content optional]</a>
The jump link destinations contain the jump link identification markers (colored blue).
Any HTML tag that can sport an id attribute can be used. Even the A tag, but using the id attribute instead of the old way of using the name attribute.
In all cases, if there's no content for the HTML tag, the jump link will still work. The tags should, however, be correctly formatted. The td tag must be in a table, for example.
More Jump Link Tips
When a jump link is clicked, the scrolling will be to the destination marker — unless end of page is reached first, in which case scrolling will stop at end of page.
The ability to use pretty much any HTML tag to place a jump link destination marker gives you fine control to where the browser scrolls to.
As an example of control, let's assume the destination is a table. The table tag has a jump link destination marker. When a clickable jump link is clicked with that destination, the page is scrolled to the very top of the table.
Now, let's suppose that after the scroll we want a bit of space above the table, not have the table hugging the top of the browser window.
A div tag with a specified height can be put above the table and the id with the jump link destination marker moved to the div tag. Here's a before and after.
Before: <table id="aplace" style="border:1px solid gold;"><tr><td>hello</td></tr></table> After: <div id="aplace" style="height:50px;"></div> <table style="border:1px solid gold;"><tr><td>hello</td></tr></table>
In the "After" example, the div tag's height is 50 pixels. Thus, the scroll will be to 50 pixels above the table.
Another tip: You want to scroll to a heading, but want some space between the top of the window and the heading. This can be accomplished in any of a couple ways.
One way is to give the heading a CSS padding-top value. Another way is to use a span tag for a destination at the end of the previous content block. Here are both ways:
First way: <h1 id="aplace" style="padding-top:50px;">Text</h1> Second way: <p>Some text<span id="aplace"></span></p> <h1>Text</h1>
The first way, with a padding-top value, puts 50 pixels of space between the top of the browser window and the heading.
The second way causes the browser to scroll to a point where the last line of the paragraph above the heading is visible at the top of the browser window. Following that is the normal space between paragraph and heading, then the heading itself.
The tips can be applied to various HTML tags for fine control of jump link locations.
Oh, one more tip: The a-tag name attribute jump link destination marking method still works in the browsers I've tested, even on HTML 5 pages.
It would be prudent, however, to update any pages using that method so it uses the new any-tag id attribute method. Browsers will eventually, perhaps sooner than later, remove a-tag name attribute jump link support.
(This article first appeared in Possibilities ezine.)
Will Bontrager
