One Page Scroll Navigation Plugin with jQuery - pageNav

pageNav is a very simple-to-use jQuery plugin for creating top navigation for one page scroll website like App landing page. The plugin allows the visitor to switch between sectioned content with smooth scrolling effect and automatically updates menu's CSS class to indicate the currently viewed content in view.

How to use it:

1. Import jQuery and the jQuery pageNav plugin's script into your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.pagenav.js"></script>

2. Create a navigation with anchor links for your one page scroll website.

<nav> 
  <a href="#home">Home</a> 
  <a href="#about">About</a> 
  <a href="#services">Services</a> 
  <a href="#contact">Contact</a> 
</nav>

3. Wrap your sectioned content into the main container.

<main>
  <section id="home">
    <h2>Home</h2>
    <p>Some Words</p>
  </section>
  <section id="about">
    <h2>About</h2>
    <p>Some Words</p>
  </section>
  <section id="services">
    <h2>Services</h2>
    <p>Some Words</p>
  </section>
  <section id="Contact">
    <h2>Contact</h2>
    <p>Some Words</p>
  </section>
</main>

4. The sample CSS to style & position the navigation.

nav {
  position : fixed;
  top : 0;
  width : 100%;
  padding : 20px 30px;
  background : #fff;
  border-bottom : 1px solid #eee;
}

nav a {
  padding-right : 30px;
  color : #000;
  text-transform : uppercase;
  text-decoration : none;
}

nav a.Active { font-weight : 600; }

5. Initialize the plugin.

$(document).ready(function () {
  $('nav a').pageNav();
});

6. Available options.

$('nav a').pageNav({

// offset
'scroll_shift': 0,
'active_shift': 0,

// active class
'active_item':  'Active',

// animation speed
'duration':     900

});

---

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