Don't add anchors on later events, like $(document).ready() or window.onload as some browsers will attempt to jump to your ID before AnchorJS can add it to the page. For more details, see github issue #69).

Options

You can set a number of options to customize how your anchors look:

Option

Accepted Values

Default Value

Description

placement

rightleft

right

right appends the anchor to the end of the element.left places it to the left, in the margin.

visible

hoveralwaystouch

hover

hover displays the anchor when hovering over the element.always will always display the anchor link. touch will always display anchors for devices that support touch events, and only display them via hover for devices that do not support touch events. This approximates touchscreen detection (but isn't 100% accurate).

icon

(any unicode character)



Replace the default link icon with the character(s) provided. These are a few good options: #, ¶, ❡, and §.

class

(any string)

(none)

Adds the provided class(es) to the anchor html.

truncate

(any positive number)

64

Truncates the generated ID to the specified character length. Note: the length may not be exactly the same, if there are dangling spaces or hyphens to be trimmed.

Removing anchors with .remove() should be uncommon. If you simply want anchors on a more selective group, consider using the CSS :not() pseudo-class when you add them, like so:

/**
* Example 2
* Add anchors to all h2s, except for those with a class of "no-anchor".
*/
anchors.add('h2:not(.no-anchor)');

Chaining commands

You can chain commands of add() and remove() (since they return a copy of anchors), but it's usually more performant to lean on CSS when targeting elements:

/**
* Example 1
* Adds anchors to `.my-anchors` and `.my-other-anchors` except for those
* with a class of `no-anchor`.
*/
anchors.add('.my-anchors').add('.my-other-anchors').remove('.no-anchor');
/**
* Example 2
* A more performant way to add anchors to the same classes in Example 1 above.
*/
anchors.add('.my-anchors:not(.no-anchor), .my-other-anchors:not(.no-anchor)');

Multiple sets of anchors

You can have multiple sets of anchors on one page, each with their own design. To do so, just create your own instances of the AnchorJS object: