jQuery Plugin for Auto Adding Anchors To Elements - anchoring
File Size: | 41.4 KB |
---|---|
Views Total: | 1187 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

anchoring is a jQuery plugin for auto adding anchors to specific elements to make them linkable. Each element will get an unique ID generated from the text inside the anchored element and a link pointing to it, so you can use this plugin to easily create a quick navigation menu for your long web page to improve the user experience.
How to use it:
1. Inlcude the latest jQuery library and anchoring.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/lib/jquery.anchoring.js"></script>
2. Markup HTML Structure
<h1>HeadLine</h1> ... <h2>TagLine 1</h2> ... <h2>TagLine 2</h2> ... ...
3. Add links to all headings of the type h1 and h2
$(function(){ $('h1, h2').anchoring({ linkText: '#' }); })
4. Options
$(function(){ $('h1, h2').anchoring({ // use another text for the actual anchor linkText: '#', // class the anchored element will be assigned to containingClass: 'anchoring', // class the link will get linkClass: 'anchor', // elements with this class wont be anchored excludeClass: 'noAnchoring', // offset for the scroll–usefull for pages with fixed bars and menus scrollOffset: 0, // max length of the generated anchor. 0 means no limit maxLength: 100, // max amount of words the generated anchor will contain. 0 is no maxWords maxWords: 0 }); })
Change log:
2015-11-03
- fix(scroll-offset) don't expect ES6 String.startsWith()
This awesome jQuery plugin is developed by SmallImprovements. For more Advanced Usages, please check the demo page or visit the official website.