This time I will share jQuery Plugin and tutorial about Tiny One Page Scroll Navigation Plugin For jQuery, hope it will help you in programming stack.
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.
1 |
<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.
01 |
<div class="navigable" style="height: 1100px;"> |
04 |
<div class="navigable" style="height: 1000px;"> |
07 |
<div class="navigable" style="height: 1300px;"> |
10 |
<div class="navigable" style="height: 1400px;"> |
3. Place jQuery and the page content navigation’s JavaScript file at the end of the document.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="page-content-navigation.js"></script> |
4. Call the function on the page sections and done.
1 |
$('.navigable').contentNavigation(); |
5. Adjust the position of your one page scroll navigation.
1 |
$('.navigable').contentNavigation({ |
2 |
offsetIndicator: '-33%' |
6. Add scroll to top/bottom buttons to the one page scroll navigation.
1 |
$('.navigable').contentNavigation({ |
Change log:
2016-11-29
This awesome jQuery plugin is developed by jpcurrier. For more Advanced Usages, please check the demo page or visit the official website.
