Lightweight One Page Scroller Plugin with jQuery
File Size: | 133 KB |
---|---|
Views Total: | 2831 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A minimal jQuery scrolling plugin which enables you to animate scrolling to desired content sections smoothly, with support for easing effects and snapping functionality.
How to use it:
1. Load the jQuery scroller plugin after you have jQuery library installed.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/jquery.scroller.js"></script>
2. Load the jQuery easing plugin for extra easing effects.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
3. Create anchor links pointing to target content sections.
<nav class="scroller-nav" data-scroller-nav> <a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a> </nav>
4. Add the essential data-scroller-section
attribute to your content sections.
<section id="section1" data-scroller-section> Section1 </section> <section id="section2" data-scroller-section> Section2 </section> <section id="section3" data-scroller-section> Section3 </section>
5. Wrap the one page navigation & sectioned content into a container. The whole markup structure should be like this.
<div class="scroller" data-scroller> <nav class="scroller-nav" data-scroller-nav> <a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a> </nav> <section id="section1" data-scroller-section> </section> <section id="section2" data-scroller-section> </section> <section id="section3" data-scroller-section> </section> </div>
6. Call the plugin on the wrapper element and set the options for the one page scroller.
$(window).on('load', function() { $('[data-scroller]').scroller({ body: 'html, body', navigationcontainer: '[data-scroller-nav]', navigation: '[data-scroller-nav] > a', section: '[data-scroller-section]', current: 0, // initial index speed: 650, // animation speed easing: 'easeInOutExpo' // easing effects }); });
7. Style the one page scroller whatever you like.
.scroller { width: 100%; height: 100%; } .scroller section { width: 100%; height: 100%; } .scroller section#section1 { background: #CA2B69; } .scroller section#section2 { background: #3A7EA2; } .scroller section#section3 { background: #00B1A0; } .scroller .scroller-nav { z-index: 999; position: fixed; top: 50%; right: 20px; margin-top: -75px; } .scroller .scroller-nav a { display: block; margin: 12px 0px; width: 16px; height: 16px; font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #FFFFFF; } .scroller .scroller-nav a:active, .scroller .scroller-nav a.active { background: #FFFFFF; }
This awesome jQuery plugin is developed by scottdejonge. For more Advanced Usages, please check the demo page or visit the official website.