jQuery Plugin For Nested Anchored-based Navigations - Anchorific.js

Anchorific.js is a lightweight jQuery plugin for generating anchored headings and automatically creating anchor-based nested navigations. A little similar to the table of contents in document.

See also:

• Lightweight jQuery Scroll To HTML Elements Plugin - Arbitrary Anchor
• jQuery Auto Anchored Heading Elements Plugin - Anchorify.js
• jQuery Plugin for Auto Adding Anchors To Elements - anchoring

How to use it:

1. Include jQuery javascript library and jQuery Anchorific.js script at the end of your document.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="src/anchorific.js"></script> 

2. Create a container for the navigation that allows the visitor to scroll to any section of your page.

<div class="anchorific"> </div>

3. Create the content.

<div class="content">
<h1> Title 1 </h1>
<p> YOUR CONTENT </p>
<h2> Title 2 </h2>
<p> YOUR CONTENT </p>
<h3> Title 3 </h3>
<p> YOUR CONTENT </p>
...
</div>

4. Create the Html for a Scroll to top button at the bottom of your web page.

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

5. Put styles in your CSS and change it to your taste.

<link href="css/style.css" rel="stylesheet">

6. Initialize the plugin.

$('.content').anchorific();
$( 'html, body' ).animate({
scrollTop: ashara.offset().top
}, 3);

7. Options.

$('.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, // scroll spy
position: 'append' // position of anchor text
});

About author:

Author: Ren Aysha

Homepage: http://renaysha.me/

Project Homepage: https://github.com/renettarenula/anchorific.js/

---

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