jQuery Plugin For Single Page Scroll To Navigation

Single Page Nav is a lightweight jQuery plugin for creating navigation links that allow to smoothly scroll to desired sections of your page. The plugin also has the ability to highlight the links to reflect the current section while you scrolling down or up.

How to use it:

1. Include the jQuery single page nav plugin in the page. Please ensure that you have jQuery javascript library have loaded.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.singlePageNav.min.js"></script> 

2. Create navigation links with hashes pointing to the desired sections.

<div class="demo">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>

3. Create content sections with unique IDs.

<div class="section" id="section1">
<h1>Section 1</h1>
...
</div>

<div class="section" id="section2">
<h1>Section 2</h1>
...
</div>

<div class="section" id="section3">
<h1>Section 3</h1>
...
</div>

4. Initialize the plugin with options and callbacks.

<script>
$('.demo').singlePageNav({
offset: $('.single-page-nav').outerHeight(),
threshold: 120,
speed: 400,
currentClass: 'current',
easing: 'swing',
filter: ':not(.external)',
updateHash: true,
beforeStart: function() {
console.log('begin scrolling');
},
onComplete: function() {
console.log('done scrolling');
}
});
</script>

Change log:

2014-05-29

• A minor fix for resolving active position in cases where there are no links to activate

2014-04-23

• support for absolute urls

---

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