App Style One Page Scroll Plugin With jQuery - AppLikeOnePage.js

AppLikeOnePage.js is a really simple jQuery plugin used to create an accessible, full-window one page scrolling webpage with support for keyboard navigation, seamless scrolling and side navigation. Great for mobile-app style single page application or presentation.

How to use it:

1. First you need to load the onepage.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/onepage.js"></script>

2. The basic html structure to create a one page scrolling web layout.

<div id="view">
  <div id="frame">
    <div class="op-section">
      section0
      <p><input type="text"/></p>
    </div>
    <div class="op-section second">section1</div>
    <div class="op-section third">section2</div>
    <div class="op-section fourth">section3</div>
    <div class="op-section fifth">section4</div>
    <div class="op-section last">section5</div>
  </div>
</div>

<div id="radioWrap">
  <ul id="radio">
    <li>section0</li>
    <li>section1</li>
    <li>section2</li>
    <li>section3</li>
    <li>section4</li>
    <li>section5</li>
  </ul>
  <span id="radioOn"></span>
</div>

3. To apply one page layout to your web page, it is crucial to set key values of frame, container, radio, radioOn and sections.

startOnePage({
  frame: "#view",
  container: "#frame",
  sections: ".op-section",
  radio: "#radio",
  radioOn: "#radioOn",
  speed: 500,
  easing: "swing"
});

4. Set overflow-y property to prevent scroll bar mess up the whole layout.

body {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  color: #fff;
}

li { list-style-type: none; }

6. The primary CSS styles to style the one page scroll web layout and its side navigation.

.op-section { background-color: #00a; }

.second { background-color: #55a; }

.third { background-color: #99a; }

.fourth { background-color: #aad; }

.fifth { background-color: #aae; }

.last { background-color: #aaf; }

#radioWrap {
  width: 20px;
  height: 180px;
  position: absolute;
  right: 5%;
  top: 50%;
  margin-top: -90px;
}

#radio {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#radio li {
  width: 20px;
  height: 20px;
  background-color: rgba(255,255,255, 0.5);
  text-indent: -10000px;
  border-radius: 50%;
  margin-top: 12px;
  cursor: pointer;
}

#radio li:first-child { margin-top: 0; }

#radioOn {
  width: 20px;
  height: 20px;
  margin-bottom: 12px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  border-radius: 50%;
}

---

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