anchor-js

AnchorJS

A tiny JavaScript utility for adding deep anchor links (like these) to existing page content.

By default, AnchorJS displays a link icon appended to an element which is made visible on hover.

See the demo for an example.

Deep links are useful for linking to specific places in online books and documentation (like, for example, this README file when rendered on the Github project page--hover over headings to see what I mean).

Installation

Download AnchorJS via npm:

npm install anchor-js

or alternatively via bower:

bower install anchor-js --save-dev

Including AnchorJS

Include the anchor.js file (or alternatively anchor.min.js) in your webpage.

<script src="anchor.js"></script>

For the default anchor link styling (demonstrated in the demo) you should also include anchor.css.

<link rel="stylesheet" href="anchor.css">

Alternatively, you can provide your own styling.

Using AnchorJS

AnchorJS provides the addAnchors() method for adding anchors to the page. This method accepts a selector as a parameter in the form of a string. The selector can be used to target specific elements that you want to add anchors to. Here's an example.

/**
 * Example 1
 * Add anchors to all h1's on the page
 */
addAnchors('h1');

/**
 * Example 2
 * Adds anchors to elements that have been assigned the class '.anchored'
 */
addAnchors('.anchored');

/**
 * Example 3
 * Adds anchors to all h1, h2, & h3's inside a container with an ID of '#post'
 */
addAnchors('#post h1, #post h2, #post h3');

/**
 * Example 4
 * If no selector is provided, it falls back to a default selector of 'h1, h2, h3, h4, h5, h6'
 * which adds anchors to all headings.
 */
addAnchors();

Compatibility

Currently Supports: IE9+ and modern browsers

License

Licensed with the MIT License.