jQuery & CSS3 Based Smooth One Page Scrolling Effect

onepagescroll.js is a lightweight jQuery plugin that uses CSS3 transitions and transforms to implement a smooth one page scrolling effect with snapping functionality to your single page website.

How to use it:

1. Include jQuery JavaScript library and the jQuery onepagescroll.js plugin at the bottom of your webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.onepagescroll.min.js"></script> 

2. Create a set of content panels for your webpage.

<div id="box">
  <div> Panel One </div>
  <div> Panel Two </div>
  <div> Panel Three </div>
  <div> Panel Four </div>
</div>

3. Create a side navigation which allows the visitor to navigate between these content panels with mouse click.

<div id="contorl" class="px"> 
  <span class="db on"></span> 
  <span class="db"></span> 
  <span class="db"></span> 
  <span class="db"></span> 
</div>

4. Enable the plugin.

var onepage = $("#box").onepagescroll({
    box: "div",   // SELECTOR
    cycle: 0  // infinite looping
}, function (o) { // side navigation
    $("#contorl .on").removeClass("on");
    $("#contorl span").eq(o.index).addClass("on");
});
$("#contorl span").click(function(){ 
    onepage.change($(this).index());
});

5. Style the side navigation.

#contorl {
  height: 200px;
  width: 40px;
  right: 0;
  top: 50%;
  margin-top: -100px;
  z-index: 9;
  position: fixed;
}

#contorl span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #a08c8c;
  margin: 15px 10px;
  cursor: pointer;
}

#contorl span.on { background: #000000; }

6. Plugin's default options.

// selector
box: "div",

// minimum distance in px for touch swipe
disance: 100,

// infinite looping
// 0 = disable
cycle: 1, 

// animation speed
animationTime: 0.8,

// except these elements...
exception:["SPAN","test2","test3"]

Change log:

2015-10-10

• fixed for iOS
• add an exception option

2015-06-18

• fixed for IE 8 / 7

---

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