The Usability Of Internal Links

I had half-written a post on Internal Links, which I never got around to completing. Here's what I had written.

Internal links (or the #-links, as some people call them) in a document are wonderful things. You can jump from one point in the document to the other without a page refresh, in a snap - literally. These links are typically used for linking from an on-page index to the relevent part of the document (on the same page). (Example - scroll down slightly to see the Table of Contents which is all made up of internal links.)

However, in some cases, this very benefit of internal links turns out to be a problem. Internal links look just like regular links for all practical purposes. When a user clicks on a link, he expects the page to refresh - afterall, thats how links are used most commonly in the browser. Instead, with internal links, the scrolling level (scroll bars) of the page gets set to a new position within the same document.

The problem is further complicated by the fact that there is no visual clue to the user to tell him where he can find the target of the link he has clicked on. Most browsers set the scroll level such that the target is right at the top of the viewing area. The user has no way of finding this out.

One way around this problem is to style internal links differently. I am sure there must be a CSS way of styling internal links differently using different selectors. But I wouldn't take the route of having differently styled links for different purposes, and then hoping that the user guesses correctly how each differently styled link would behave.

I admit I wouldn't have thought of smooth scrolling. I saw a lovely implementation of this on this site. The links to the right of the headings, saying "About the Site/Code" and "About the Author" or the link that says "Top" are all internal links that visually guide the user to the right target in the document. Great trick to keep in handy. The code in this implementation is also extensible and unobtrusive. Great job!