Smooth and Smart One Page Navigation Plugin

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

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.