Tiny One Page Scroll Navigation Plugin For jQuery

Page Content Navigation is a super tiny jQuery plugin that adds a sticky sidebar navigation to your modern one page scrolling website and web application.

Features:

• Quickly navigates between page sections with a smooth scrolling animation.
• Shows which content section you're viewing.
• Scroll to top/bottom navigation buttons.

How to use it:

1. Place the page content navigation's main CSS file in the document's head sections.

<link rel="stylesheet" href="page-content-navigation.css">

2. The basic HTML markup for the Smart Wizard. You can customize it by adding your custom web contents.

<div class="navigable" style="height: 1100px;">
  <h1>Page Jump #1</h1>
</div>
<div class="navigable" style="height: 1000px;">
  <h1>Page Jump #2</h1>
</div>
<div class="navigable" style="height: 1300px;">
  <h1>Page Jump #3</h1>
</div>
<div class="navigable" style="height: 1400px;">
  <h1>Page Jump #4</h1>
</div>

3. Place jQuery and the page content navigation's JavaScript file at the end of the document.

<script src="jquery.min.js"></script>
<script src="page-content-navigation.js"></script>

4. Call the function on the page sections and done.

$('.navigable').contentNavigation();

5. Adjust the position of your one page scroll navigation.

$('.navigable').contentNavigation({
  offsetIndicator: '-33%'
});

6. Add scroll to top/bottom buttons to the one page scroll navigation.

$('.navigable').contentNavigation({
  includeTopNav: true
});

Change log:

2016-11-29

• JS update

---

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