anchor.js

jQuery plugin that automatically creates unique anchor links for headlines, paragraphs or other specified elements.

See a demo on codepen.

Installation

Include anchor.js after the jQuery library:

<script src="/path/to/anchor.min.js"></script> 

Usage

$('h1, h2, .huge-heading').anchor(); 

anchor.js then applies a unique anchor link to each element.

So <h1>Heading</h1> would become:

<h1 class="anchored" id="heading">Heading <a class="anchor" href="#heading">¶</a></h1> 

Options

$('h1, h2, .huge-heading').anchor({     headingClass: 'heading-class', // default is 'anchored'     anchorClass:  'anchor-class',  // default is 'anchor'     symbol:       '→',             // default is '¶'     maxLength:    30               // default is 100 });