wroughtec / jQuery-One-Page-Nav

Smooth scrolling and smart navigation when user scrolls on one-page sites.

A lightweight jQuery plugin for the navigation on one-page sites. Adds smooth scrolling when clicking on the navigation and automatically selects the correct navigation items as you are scrolling through the different sections.

The plugin still works even if you add additional content to the page after the fact that changes the position of each section.

Sample 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>

Example Usage with Defaults:

$('#nav').onePageNav({
	currentClass: 'current',
	changeHash: false,
	scrollSpeed: 750,
	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
	}
});

If you want the hash to change when a user clicks on the navigation, then change the changeHash options to true.

If you want to filter items out of your navigation then pass in a selector to the filter option.

Filter Example:

<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>
	<li><a href="#section-4">Section 4</a></li>
	<li><a href="#section-5">Section 5</a></li>
	<li><a href="http://google.com" class="external">Some other link</a></li>
</ul>

$('#nav').onePageNav({
	filter: ':not(.external)'
});

If you are having issues with iOS devices

If clicking a link in the nav makes the rest of the links unclickable until you scroll, you can solve it in this hacky way:

$('#nav').onePageNav({
	begin: function() {
		//Hack so you can click other menu items after the initial click
		$('body').append('<div id="device-dummy" style="height: 1px;"></div>');
	},
	end: function() {
		$('#device-dummy').remove();
	}
});

Found the solution here