jQuery Auto Anchored Heading Elements Plugin - Anchorify.js
File Size: | 59 KB |
---|---|
Views Total: | 609 |
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.