Page jumps with internal links
Page: prev. | 1 | next
Internal links or “page jumps” are an adept way of organising and navigating content on long pages. Their use is far better than simply directing a visitor to “go to the bottom left of the page”. They can be used to direct visitors to a particular section of a page even if they are not currently browsing the page.
An internal link is a hyperlink that links to a named section within a page. The section of the page used to have to be named via an anchor element with a name parameter:
Use of the name parameter is now discouraged and indeed not supported under the HTML 5 specification in favour of using an id parameter attached to any element, usually a header or division element:
A link is made to the section of the page by use of a hash mark character followed by the name assigned to the section which is termed a “fragment identifier”:
Here the fragment identifier points to a section in the current page being browsed. When the link is clicked the page will “jump” to that position.
It can also be appended to the end of a relative file path name for a file in the same or a sub-directory:
When the link is clicked the page will be loaded and will jump to that position.
An absolute link can be used with the fragment identifier appended to the end of a full file path name after the file extension (if the page has one; if you use extensionless URLs there will be no file extension and if linking to a domain or directory’s index page then the file name can be skipped altogether):
An absolute link would work in place of a relative link in any case, but a relative link is preferable if the section is in the same page as the page does not need to be fetched again.
Try it out: scroll down so this is at the top of your browser window and click here to jump back to the page title.
<h1 id="PageTitle">Page jumps with internal links</h1>
Link:
<a href="#PageTitle">
Use of an id parameter makes internal linking much more usable as id parameters are widely used for a number of purposes whereas before a name parameter had to be defined specifically to allow linking to a particular section of a page.
This is handy, for example, to direct someone to a particular section of a long Wikipedia article as Wikipedia gives most of its section headings an id parameter (probably for this purpose). For example, a look at the source code of the Wikipedia article on the Hypertext Transfer Protocol reveals the <h2> header for the Status Codes section of has an id parameter so to send a visitor directly to that part of the page you can set a link as:
Brightening it up
An internal link just ensures that the page jumps to the section specified, but you can make it more stylish with a little Javascript.
I make use of internal links in this sites blog Pick of the Week posts so that visitors can be directed to individual stories on a page and make use of Javascript triggered when the page loads to determine if a fragment identifier is present in the URL and highlight the story with CSS if so:
- <script type="text/javascript">
- window.onload = function() {
- /*Triggers when page has loaded, highlights location on page if hash present in URL*/
- var locHash = location.hash;
- /*Returns base zero location of hash in string if present, empty string returned if not*/
- if (locHash != '') {
- //Hash was present
- locHash = locHash.substring(1); //Strip hash mark character
- var setDiv = document.getElementById(locHash);
- /*Section specified by id to style*/
- setDiv.className = 'highlight';
- /* Being the CSS class selector to style the element*/
- }
- }
- </script>
Note: site uses extensionless URLs, no .html etc. so pick-of-the-week-10-jul IS the page in this case.
With a little thought maybe you can think up some interesting ways to make internal links help ease and brighten up navigation on your site.
Page: prev. | 1 | next