Telling visitors exactly where to go!

At times you want to direct your visitor to a specific location on a page. Common examples are on FAQ pages that link the question with the answer, or links back to the "top" of a page.

It is also possible that in-page links can enhance your listing in search results. Google sometimes adds a "Jump to" link in search results if it feels that a particular part of the page is the most relevant to the phrase searched for. Google requires these in-page links to do that.

As an example I have created a link to part 2 of this article.

There are two steps to achieving this:

Marking a position to send your visitors to - Anchor

Positions on pages that can be destinations for links are called anchors.

Many content management systems (CMS) provide html editors which will easily let you add an anchor to your content:

Html editor with the anchor button and an anchor highlighted

Click in the content where you want the anchor then click on the anchor icon in the toolbar. You will be asked to enter a name. This is what you will use later to link to this anchor. I recommend you keep it simple and stick to letters and numbers. Avoid spaces as they cause trouble!

If you don't have an html editor, then you will have to delve into the html yourself. It is quite simple, don't worry. Here is some sample html which consists of an anchor called "part2":

<a id="part2" name="part2"></a>

Place it on the line before the content you wish to link to and your done. The id and name attributes should both be the same. Using the id attribute is the correct way but the name attribute is included for backwards compatibility.

Linking to an anchor

Now you have a named anchor you can send visitors to it in the same way you create normal links. All you do is add the id/name of the anchor to the end of your links URL. The name needs to be preceded by a # to indicate it is the name of an anchor. Here are some examples of links which go to anchors.

<a href="#part2">A link to an anchor on the same page</a>
<a href="">Another page</a>
<a href="">Complex</a>

Note that the anchor name is always the last part of the URL.

Sometimes it may seem that an anchor link is not working. This can happen if the anchor is so close to the end of the page that the browser can't fully scroll to its position. One solution is to add some blank lines at the end of you page to give the browser room to scroll.