Aysha Anggraini

On Code, Design, and Movement

Anchorific.js

What is it?

Anchorific automatically generates anchored headings and nested navigations based on header tags. Anchored links ( # ) on this page and the nested navigation on the left is generated automatically by Anchorific.js.
You can fork or download from Github.

Why?

I always create single-page project documentations with anchored headings and anchored-based navigations to jump from one section to another. However, I feel that it is repetitive to create the anchored headings and anchored-based navigations manually. I want to focus on writing the documentation and let jQuery generates the anchored headings and nested navigations for me. Thus, Anchorific.js was born.

There is also another main reason why. You can check it out here onĀ renaysha.me/2013/10/anchorific-js-now-on-github/

Getting Started

HTML Structure

Be mindful of how you structure the header tag. H1 should be followed by H2, H2 should be followed by H3 and so on. You should not skip a level with the header tags.

Anchorific relies heavily on this particular structure when generating the anchor navigation. For a quick help, you can see how this page’s header tags is structured.

<h1>The Lannisters</h1>
    <h2>Tywin Lanister</h2>
    <h2>Cersei Lannister</h2>
        <h3>Joffrey Baratheon</h3>
        <h3>Myrcella Baratheon</h3>
        <h3>Tommen Baratheon</h3>
    <h2>Jaime Lannister</h2>
    <h2>Tyrion Lannister</h2>

The plugin will create anchored headings and add an anchor link within the header tag:

<h1>Tywin Lannister</h1>
<!-- This would be turn to -->
<h1 id="tywin-lannister">Tywin Lannister <a href="#tywin-lannister" class="anchor">#</a></h1>

What about existing ID?

It is okay to have an existing ID on your header tag, such as this one above! You can have something like this:

<h3 id="what-if-I-already-have-an-id">What about existing ID?</h3>
<!-- This would be turn to -->
<h3 id="what-if-I-already-have-an-id">What about existing ID?<a href="#what-if-I-already-have-an-id" class="anchor">#</a></h3>

Anchorific.js preserves the original ID and also uses the original ID value on the anchor’s href attribute.

Generate navigations

Include a div or a nav section where you want the unordered list of anchor navigation to be appended at:

<nav class='anchorific'></nav>

By default, the plugin will append the unordered list under an element with class called anchorific. If you wish to use another class name, you need to specify it in the plugin’s option.

CSS

The anchored navigation can be styled easily. As stated previously, the anchored navigation will be appended under a class named anchorific. Below are the selector that you can use in your CSS in order to style the anchored navigation.

.anchorific {}
.anchorific ul {}
.anchorific ul li a {}
.anchorific li ul {}
.anchorific li.active > a {}
.anchorific li.active > ul {}
        

You can also check this page’s CSS in order to see how it is done. The anchored navigation for this page is inspired by the ones used in getbootstrap.com.

Basic Usage & Options

This documentation used the following usage below since we only want to include the header tag inside the content wrapper:

$('.content').anchorific();

You can call the plugin function with any selector you want as long as it adhere to the HTML structure mentioned above. Options available are as followed:

$('.content').anchorific({
    navigation: '.anchorific', // position of navigation
	speed: 200, // speed of sliding back to top
	anchorClass: 'anchor', // class of anchor links
	anchorText: '#', // prepended or appended to anchor headings
	top: '.top', // back to top button or link class
	spy: true, // highlight active links as you scroll
	position: 'append' // position of anchor text
});

Generating navigations, Scroll spy, and ‘Back to top’ functionality can be disable by assigning false value to the options.

Adding ‘Back to Top’ Button

The ‘Back to Top’ button can be added easily. Just add an element with class top. You can use other class names but it should be specified in the plugin options.

 <a href="#top" class="top">Scroll to top</a>

Remember to add display: none; to the .top styling. It should not be visible when the page first load.

The speed of the scrolling effect can be adjusted by specifying it in the options above.

If you do not wish to have a ‘back to top’ button, you can disable the functionality by assigning the top option to false.

Demo?

You’re looking at it! ‘Right click > Inspect element’ to any of the header tags above in order to see how the anchored headings are generated.

The navigation on the left shows how the nested navigations are generated. Note that the plugin just adds an ‘active’ class when scrolling. You can manipulate the effects using CSS.

There is also a ‘back to top’ button on the lower right.

The plugins are thoroughly tested with Qunit.js. I have tested the navigations generated from h1 – h6 tags. If you want to see how that looks like, just view the index.html page on the project’s folder or by running the test. If you have Grunt.js installed, you can just cd to the folder and run npm install. After that is done, just type grunt in your terminal.

It is also possible to just run the test through the index.html file in the tests folder. However, you need to use a local server like MAMP or node.js in order to run the file as I used iFrame in order to test the scrolling event.

Thoughts?

Back to top