demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

featured articles

popular favourites

Anchor Links

An anchor is a named point in a page, invisible to the viewer, embedded in code. By using an <a> link you can navigate to not only a specific page, but also a specific location on that page. This is particularly useful when you have very long pages, and want to give the user the ability to navigate to a specific section (for example, in a long article or essay written on a single page).

First, you need to create an anchor point. This is achieved by adding an id attribute to the tag nearest the point your want to jump to: usually, but not exclusively, a heading element. Note that the id attribute value must be unique to that page. For example, a heading element with an id of introduction:

  1. <h1 id="introduction" >Introduction</h1>

While almost any tag may be given an id attribute (and doing so becomes very useful for both CSS and JavaScript), no other element on this page can have an id value of introduction.

Then you need to create a link to this location. Using a standard link tag, write a link to the id attribute value you just created, with a # sign in front of it:

  1. <a href="#introduction">Go to the introduction</a>

Note that you will need plenty of space between the link and the anchor in order to see the page move when you click on this link. The easiest and most forthright method is to enter some filler filler text between the link and its destination.

Assuming that the anchor was on a page called "manual.html" and you were linking from another page to the specific location of "important_info" in "manual.html" the link would be:

  1. <a href="manual.html#important_info">Read this information first<a>

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.