Flexible & Touch Compatible jQuery One Page Scroll Plugin - OnePageR

OnePageR is a lightweight jQuery plugin for easy implementation of smooth, mobile-friendly vertical scrolling with sectioned content. Helps you create a modern single page / one page scroll website with arrow/click/menu navigation.

How to use it:

1. Create a menu navigation for your one page scroll website.

<nav id="nav-main">
  <ul class="opr-nav">
    <li><a data-target="1">first</a></li>
    <li><a data-target="2">second</a></li>
    <li><a data-target="3">third</a></li>
    <li><a data-target="4">fourth</a></li>
  </ul>
</nav>

2. Create sectioned content following the Html structure like this:

<div class="opr-container">
  <div class="opr-page opr-current first" data-target="1">
    <div class="opr-next"></div>
  </div>
  <div class="opr-page second" data-target="2">
    <div class="opr-next"></div>
  </div>
  <div class="opr-page third" data-target="3">
    <div class="opr-next"></div>
  </div>
  <div class="opr-page fourth" data-target="4">
    <p>&nbsp;</p>
  </div>
</div>

3. Add the core styles into your CSS file.

.opr-page {
  position: fixed;
  height: 100%;
  width: 100%;
}

.opr-current { z-index: 99; }

.opr-animate { z-index: 100; }

.opr-nav a[data-target],
.opr-next,
.opr-prev { cursor: pointer; }

#nav-main {
  position: fixed;
  right: 0;
  z-index: 999;
  padding: 20px;
  margin: 20px;
  border: 4px solid #333;
}

#nav-main li { float: left; }

#nav-main li + li { margin-left: 20px; }

.opr-next {
  width: 30px;
  height: 30px;
  position: fixed;
  left: 50%;
  bottom: 40px;
  box-shadow: 4px 4px 0 #333;
  transform: translate(-50%, 0) rotate(45deg);
  cursor: pointer;
}

4. Include the jQuery library and the jQuery OnePageR plugin at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="js/opr.js"></script>

5. Include the jQuery touchSwipe plugin for touch swipe support on mobile devices.

<script src="js/jquery.touchSwipe.min.js"></script> 

6. That's it . The plugin will auto initialize on page load.

Change log:

2015-05-06

• [FIX] Enhanced touchpad scrolling

---

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