Tiny One Page Scroll Navigation Plugin For jQuery
File Size: | 5.5 KB |
---|---|
Views Total: | 2369 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.