AnchorJS

Hover over each heading to see the anchor link produced by AnchorJS.

H1 with ID

If the element being selected has an ID, AnchorJS will create anchors that link to that ID. For example, because the h1 above has an id of test-id-1, AnchorJS creates an anchor link with an href of href="#test-id-1". Anchor links will always use relative paths.

H1 without ID

If an element has no ID for anchoring to, AnchorJS will create an ID based on the element's content and add it to the tag. For example, this h1 was originally defined as <h1>H1 without ID</h1>. After running AnchorJS, the element looks like this<h1 id="h1-without-id">H1 without ID</h1> (not including the appended anchor). This allows you to provide anchors, even if you don't have control over the original markup being used.

Examples of anchor links at different sizes

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Heading 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Heading 3