1. Web Design
  2. CSS

Let’s Make Some Dynamic, Animated Section Links


When creating markup for longer written pieces on a single page, it's often important to create navigational structures to jump between different portions of that text. This is supported natively in HTML, allowing us to skip to sections within a page and even visit them directly from external links. 

On A List Apart
A List Apart–here you see the section link and the “fragment identifier” (hash tag…) in the url
The help documentation on GitHub is another place youll find dynamic section links
The help documentation on GitHub is another place you’ll find dynamic section links

In this tutorial, we'll discuss a technique for dynamically generating those links with JavaScript, and then animating them using CSS. Let’s dive in!


The first necessary step is to create suitable markup for your written piece. We'll assume that you have an article, and inside that article there are many sections, each with its own h1 tag and subsequent content.

Here’s what your HTML might look like:

Note: as you can see, we are applying an id to the separate sections. We choose to do this because the id is actually related to the section itself, not the h1 tag.

To jump to an element with a given id on a page, you create an anchor tag with an href value equal to the hash mark followed by the id. For instance, in our example content from above, to jump to the second section, we could create the following link:

There are plenty of ways to do this: you could code the links in by hand, you could use an abstraction that builds out your section HTML, including the link. In this tutorial, however, we’re going to use JavaScript to generate the links dynamically.

Vanilla JS

Here’s the JavaScript:

jQuery version

And here’s a jQuery version, essentially achieving the same thing:

Both of these give the same result. We look for all of a given article’s section descendants, and for each of those we find the id of that section. Then, we build a link which points to that id and append it to the header element. We also wrap the existing text in a span for more flexible styling.

Speaking of Styling…

Next, let’s apply some basic CSS to provide a hide and reveal effect:

These rules first set some basic styles; font, color, article width and so on. Then we state that the a (which we appended earlier via JavaScript) will have transitions applied to it and will have an opacity of 0 by default. Only when we hover over it does its opacity increase to 1, giving us the fade in effect.

And that’s it! Now we have a relatively simple implementation of this technique in action:


We’ve just built a really useful enhancement for content rich web pages! The fallback is graceful too: if JavaScript is disabled, the links simply don’t appear–and if a hash tag is present at the end of the url it’s ignored.

Our fade-in effect is a simple way of presenting the link, so how could you improve it? What kinds of animations could you apply? Would you position the link in the same way? We look forward to hearing your ideas (and watch out for the community project we’ll shortly be launching on this very subject!)

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.