Creates Anchors For Headings In Your Bootstrap Pages - anchor.js

Creates Anchors For Headings In Your Bootstrap Pages - anchor.js

anchor.js is a highly customizable jQuery anchor link generator for Bootstrap that automatically generates unique anchor links for headlines or other specified elements so that the users are able to navigate between them with a smooth scroll effect. Browser history is supported as well.

See also:


# Yarn
$ yarn add bootstrap-anchor
$ npm install bootstrap-anchor --save

How to use it:

1. Insert the jQuery anchor.js plugin's JavaScript and style sheet into your Bootstrap pages.

<!-- CSS -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/bootstrap-anchor.css">
<!-- JavaScript -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-anchor.js"></script>

2. Call the function on document ready and the plugin will automatically generate anchor links to h1, h2, h3, h4, and data-anchor elements.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<kbd data-anchor="true">Anchor Link</kbd>

3. Config the anchor.js plugin by passing the following options to the anchor() function as follows:

  // Anchor default options.
  anchors: 'h1,h2,h3,h4,[data-anchor]',
  anchorContainer: true,
  anchorDuration: 300,
  anchorFindNamed: false,
  anchorGenerateId: true,
  anchorHistory: 'append',
  anchorIcon: '<span class="glyphicon glyphicon-link" aria-hidden="true"></span>',
  anchorIgnore: '[data-anchor-ignore]:not([data-anchor-ignore="false"]),[data-dismiss],[data-slide],[data-toggle]:not([data-toggle="anchor"])',
  anchorLinks: 'a[href*="#"],[data-toggle="anchor"]',
  anchorNormalizeId: {
    separator: '-',
    // The following options appear in the order they are executed.
    convertCamel: true,
    convertCase: 'lower',
    convert: /[\s_.(){}\[\]]/g,
    strip: /[^\w-]/gi,
    singleSeparator: true,
    trim: true,
    maxLength: 32
  anchorPrefixId: false,
  anchorUniqueId: true,
  anchorOffset: 20,
  anchorTarget: false,
  // DOM binding default options.
  scrollOnHashchange: true,
  scrollOnLoad: true,
  // Override Tooltip default options.
  placement: 'auto left',
  scrollableElement: 'html,body',
  template: '<span class="anchor-link text-primary" role="tooltip"><a href="#"></a></span>',
  trigger: {
    anchors: 'hover focus',
    links: 'click'
  viewport: {
    selector: 'body',
    padding: 0

4. The plugin also allows you to config the anchor links directly via data attributes as in data-animation="false"

<kbd data-anchor="true"
     Anchor Link

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

  • Publication date: 24.10.2017
  • Source