Simplest jQuery One Page Scroller Plugin

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

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.