Smooth and Smart One Page Navigation Plugin
File Size: | 41.5 KB |
---|---|
Views Total: | 3631 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery One Page Navigation Plugin that adds smooth scrolling and smart navigation when user scrolls on one-page sites.
How to use it:
1. Inlucde jquery, scroll to and jquery.nav.js
<script src="jquery.js"></script> <script src="jquery.scrollTo.js"></script> <script src="jquery.nav.min.js"></script>
2. Markup
<ul id="nav"> <li class="current"><a href="#section-1">Section 1</a></li> <li><a href="#section-2">Section 2</a></li> <li"><a href="#section-3">Section 3</a></li> </ul> <div id="section-1"> <strong>Section 1</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="section-2"> <strong>Section 2</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="section-3"> <strong>Section 3</strong> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div>
3. Call the plugin
$('#nav').onePageNav({ currentClass: 'current', // Class to add to the list item when the navigation item is selected changeHash: false, // If you want the hash to change when the user clicks on the navigation, change this to true scrollSpeed: 750, // Speed to scroll the page when the navigation is clicked scrollOffset: 30, scrollThreshold: 0.5, filter: '', easing: 'swing', begin: function() { //I get fired when the animation is starting }, end: function() { //I get fired when the animation is ending }, scrollChange: function($currentListItem) { //I get fired when you enter a section and I pass the list item of the section } });
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.