This time I will share jQuery Plugin and tutorial about Simple SPA Page Scroller Plugin With jQuery – Scroller, hope it will help you in programming stack.
Scroller is a simple lightweight jQuery plugin used to generate a sitcky navigation menu which allows for navigating between different sections of your page. Great for one page websites and single page web applications.
How to use it:
1. Create a set of content sections with unique IDs in the webpage.
08 |
<h1>Section Three</h1> |
2. Create an list of menu links pointing to the content sections you created.
3 |
<li><a href="#s0">Home</a></li> |
4 |
<li><a href="#s1">Section 1</a></li> |
5 |
<li><a href="#s2">Section 2</a></li> |
6 |
<li><a href="#s3">Section 3</a></li> |
7 |
<li><a href="#s4">Section 4</a></li> |
3. Create an list of menu links pointing to the content sections you created.
3 |
<li><a href="#s0">Home</a></li> |
4 |
<li><a href="#s1">Section 1</a></li> |
5 |
<li><a href="#s2">Section 2</a></li> |
6 |
<li><a href="#s3">Section 3</a></li> |
7 |
<li><a href="#s4">Section 4</a></li> |
4. Make the navigation menu sticky at the top of the webpage when scrolling down.
5. Place jQuery library and the jQuery Scroller plugin at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery-1.12.1.min.js"></script> |
2 |
<script src="jquery.scroller.js"></script> |
6. Active the plugin by calling the function on the top container of the navigation list like this:
1 |
$(document).ready(function () { |
2 |
$('.main-nav').scroller(); |
7. Default plugin settings.
01 |
$(document).ready(function () { |
02 |
$('.main-nav').scroller({ |
08 |
menuClassName: 'scroller', |
This awesome jQuery plugin is developed by RokasLeng. For more Advanced Usages, please check the demo page or visit the official website.
