jQuery Plugin For Smooth One Page Scroller Plugin - Smooth Scroller

File Size: 6.37 KB
Views Total: 2067
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Smooth One Page Scroller Plugin - Smooth Scroller

Smooth Scroller is a super light jQuery plugin to generate anchoring links which allows to smoothly scroll to corresponding content sections.

How to use it:

1. Load the necessary jQuery Javascript library and the jQuery smooth scroller plugin at the end of your one page website.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/smooth-scroller.js"></script>

2. Create several anchoring links pointing to the content sections of your website.

<ul>
  <li> <a class="demo" href="#section1">Section 1</a> </li>
  <li> <a class="demo" href="#section2">Section 2</a> </li>
  <li> <a class="demo" href="#section3">Section 3</a> </li>
  <li> <a class="demo" href="#section4">Section 4</a> </li>
  <li> <a class="demo" href="#section5">Section 5</a> </li>
</ul>

3. Initialize the scroller plugin with optional settings.

$(".demo").smoothScroller({
  duration: 1000, // scrolling duration
  activeClass: "active" // the CSS class for the anchor links to indicate the current section
});

This awesome jQuery plugin is developed by open-ball. For more Advanced Usages, please check the demo page or visit the official website.