jQuery Plugin For Nested Anchored-based Navigations - Anchorific.js
File Size: | 64.8 KB |
---|---|
Views Total: | 1138 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.