Minimal Full Window Page Scrolling Plugin With jQuery - naiveScroll

naiveScroll is an extremely lightweight jQuery one page scroll plugin which enables you to scroll smoothly through full-window page sections with mouse wheel and/or custom navigation buttons.

How to use it:

1. Place jQuery library and the minified version of jQuery naiveScroll plugin into your html document.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/naiveScroll.min.js"></script>

2. Add page sections to the document.

<section class="page1"></section>
<section class="page2"></section>
<section class="page3"></section>

3. The CSS to make the page sections fullscreen and absolute positioned.

section {
  width: 100%;
  left: 0;
  height: 100%;
  position: absolute;
}

.page1 {
  top: 0;
  background-color: lightcoral;
}

.page2 {
  top: 100%;
  background-color: lightgreen;
}

.page3 {
  top: 200%;
  background-color: lightblue;
}

4. Initialize the plugin and we're done.

$(this)._naiveScroll.init();

5. The plugin also allows you to create custom navigation buttons which will help the visitor navigate between page sections manually.

$('#up-button').click(function () {
  $(this)._naiveScroll.triggerScroll(100);
});
$('#down-button').click(function () {
  $(this)._naiveScroll.triggerScroll(-100);
});

---

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