Lightweight One Page Scroller Plugin with jQuery

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.