Simplest jQuery One Page Scroller Plugin
File Size: | 28.2 KB |
---|---|
Views Total: | 2477 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Scroller.js is a jQuery plugin to create anchor links which scroll the webpage to desired content section smoothly.
How to use it:
1. Create sections of content for your single page website.
<section id="first"></section> <section id="second"></section> <section id="third"></section> <section id="fourth"></section> <section id="fifth"></section>
2. Create anchor links point the sections you just created.
<nav> <a href="#first">Section 1</a> <a href="#second">Section 2</a> <a href="#third">Section 3</a> <a href="#fourth">Section 4</a> <a href="#fifth">Section 5</a> </nav>
3. Load jQuery library and the jQuery scroller.js script in your web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="src/jquery.scroller.js"></script>
4. Load the jQuery easing plugin for more easing effects.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
5. Initialize the page scroller.
$(function(){ $('a').scroller({ // sliding speed duration: 1500, // easing effect easing: 'easeInOutExpo' }); });
This awesome jQuery plugin is developed by Raphhh. For more Advanced Usages, please check the demo page or visit the official website.