jQuery Plugin for Auto Adding Anchors To Elements - anchoring

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.