Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Smooth scrolling and smart navigation when user scrolls on one-page sites.
Branch: master
Pull request Compare This branch is 14 commits behind davist11:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.markdown
filter.htm
hash.htm
index.htm
jquery.js
jquery.nav.js
jquery.scrollTo.js
multiple.htm
top.htm

README.markdown

A lightweight jQuery plugin for the navigation on one-page sites. Uses the ScrollTo Plugin plugin to add smooth scrolling when clicking on the navigation. Also adds a class to 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,
    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
    }
});

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

Something went wrong with that request. Please try again.