Making anchor links smarter... and sexier

So I have a small bone to pick with Jacob Nielsen and his opinion on within-page links or anchor links.1 There clearly is a benefit to not just linking to a specific page, but linking to a specific part of a page.

With a little help from script.aculo.us we can spice up our anchor links by highlighting them as well as linking to them.

For this article we’ll limit our scope to internal anchors only.2 We’ll write the code using the symfony framework and in straight up XHTML. This is really dirt simple and is more of a design pattern with an example than a tutorial.

Let’s do the XHTML first:

Yup, that’s it… I told you it was dirt simple. You just need to include the proper prototype and script.aculo.us libraries.

In symfony we avoid repeating ourselves with a helper function:

and call it by doing:

That’s it.


  1. Jacob Nielsen is an easy target.
  2. Anchors on other pages are equally useful. To implement that, you need to have an event listener to examine the URL for an anchor and appropriately highlight the correct element.