Automatic Anchor Link Generator With jQuery - Anchorify

Just another jQuery plugin used to create unique anchor links with SVG based link icons for heading elements (h1, h2, h3, h4, h5, h6) within the document.

See also:

• jQuery Plugin for Auto Adding Anchors To Elements - anchoring
• jQuery Auto Anchored Heading Elements Plugin - Anchorify.js
• jQuery Plugin To Add Unique Anchor Links To Headlines - anchor.js

How to use it:

1. Download the plugin and then include the anchorify.min.js script after you've included jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="anchorify.min.js"></script>

2. Just call the function on document ready and the plugin will automatically add anchor links with the provided IDs to your heading elements.

$('body').anchorify();

3. A little CSS to style the anchor links.

.header-link {
  display: inline-block;
  margin-left: -20px;
  padding-right: 8px;
}

.header-link svg { visibility: hidden; }

h1:hover .header-link svg,  h2:hover .header-link svg,  h3:hover .header-link svg,  h4:hover .header-link svg,  h5:hover .header-link svg,  h6:hover .header-link svg { visibility: visible; }

---

This awesome jQuery plugin is developed by Automattic. For more Advanced Usages, please check the demo page or visit the official website.