Minimal Full Window Page Scrolling Plugin With jQuery - naiveScroll

File Size: 5.11 KB
Views Total: 795
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.


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 () {
$('#down-button').click(function () {

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