jQuery Auto Anchored Heading Elements Plugin - Anchorify.js

jQuery Auto Anchored Heading Elements Plugin - Anchorify.js
File Size: 59 KB
Views Total: 514
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

<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.