jQuery Auto Anchored Heading Elements Plugin - Anchorify.js

Anchorify.js is a simple but useful jQuery plugin for automatically adding anchors to heading elements (h1, h2, h3, etc...)  to make them linkable.  By default, it uses the ¶ sign for the links' text, and adds an anchor-link CSS class on each link. However, you can configure your own text, CSS class and anchor position using the text, cssClass and position options.

See also:

• jQuery Plugin for Auto Adding Anchors To Elements - anchoring

How to use it:

1. Include jQuery library and Anchorify.js on your website

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="src/anchorify.js"></script>

2. Markup html structure

<h2>Section 1</h2>
...
<h2>Section 2</h2>
...
<h2>Section 3</h2>
...
<h2>Section 4</h2>
...
<h2>Section 5</h2>
...

3. Call the plugin with options

<script>
$(document).ready(function() {
$('h2').anchorify({
text: 'Hey', 
cssClass: 'anchor', 
position: 'prepend' 
});
});
</script>

Change Log:

v1.1.4 (2014-05-16)

• Fix getText method to deal with nestes nodes, e.g. span inside header

v1.1.2 (2013-07-17)

• Fix special character

---

This awesome jQuery plugin is developed by willdurand. For more Advanced Usages, please check the demo page or visit the official website.