Anchor Links with a Fixed Header Part I

Asif Ahmed

In the last two posts, we have created a fixed header and a scrollable sidebar. We have been viewing the demo of this functionality on this page. In this post and the next we will explore how to deal with anchor tags within a single page when dealing with fixed headers.

Sometimes we want to be able to link to the middle of a page. This could be useful if you have different sections that you want to be able to “jump” to. Instead of making the user scroll to a certain section of the page and try to figure out where to find the content they want, you could add anchor links at the top that just jump to certain sections. This is often used on FAQ pages. The FAQ page has a list of the most frequently asked questions on the top of the page which are all hyperlinks. These hyperlinks lead to the answers to these questions somewhere in the middle of the page (each hyperlink will lead to a different answer). An example of this functionality can be seen on the Creative Commons Wiki. When you click on a FAQ, it will jump you to the middle of the page.

Before we see how to deal with jump links with a fixed header, let us view how to create them. To create a hyperlink that links to the middle of the page, you need two things. One is the hyperlink itself. The “href” value of this is what causes this to jump to to a section on the page. In our example page look at the page source and look at the code for the hyperlink “A” in the sidebar.

<a href="#a">A</a>

The “href” value of this is the element with ID equal to “a”. I said we needed two things to create a successful jump link. We have a hyperlink that links to an element with id of “a”; however we don’t have any elements with id of “a”. We will need to create a paragraph or a div with a id of “a”. This is the section in the page we will be jumping to. If you look at the example site you can see if you click on “A” we will jump to the section that starts with A and if you click on “B” you will jump to the section that starts with B. Therefore, now we know how to create links that can jump to different sections in the page.