jQuery Auto Anchored Heading Elements Plugin - Anchorify.js

File Size: 59 KB
Views Total: 619
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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

$(document).ready(function() {
text: 'Hey', 
cssClass: 'anchor', 
position: 'prepend' 

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.