A quick way to generate a dynamic table of contents, based on the sections as they appear in the content.

The first block loops through all the section headers (which are <h1>s), and injects them as anchor tags into the initially empty TOC wrapper DIV.

$("<a/>") is sexy jQuery syntax to create a fresh DOM element.

.data() is a nice way to store metadata about a DOM element. It’s nice because it doesn’t store the data *in* the DOM, which is notoriously slow.

The second block just adds the click handler and uses the $.scrollTo plugin for some fancy scrolling animation.

It’s small, but neat, and it removes the need to maintain a duplicate list of section names.

Originally found on Frontend Dev Guidelines