Simple Full Page Scrolling Plugin For jQuery - scrollview.js

scrollview.js is a simple-to-use jQuery plugin used to create smooth vertical or horizontal fullscreen scrolling effect for one page website / web application.

Key Features:

• Navigate through a set of content sections via mouse wheel or side pagination.
• Supports jQuery easing effects
• CSS3 powered scroll animations.
• Allows to loop back to the first section when you reach the last one.

Basic usage:

1. Load the scrollview.js script after jQuery library but before the closing body tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/scrollview.js"></script>

2. Create content sections with data-index attributes.

<div id="main">
  <section data-index=1 class="page1"></section>
  <section data-index=2 class="page2"></section>
  <section data-index=3 class="page3"></section>
</div>

3. Add a CSS Reset to your Html page.

<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet">

4. The core CSS/CSS3 styles for the scrollable web page.

html { height: 100%; }

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#main {
  position: relative;
  width: 100%;
  height: 100%;
}

#main>section {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-pagination {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0;
}

.scroll-pagination li a {
  padding: 10px;
  display: block;
}

.scroll-pagination li a:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(67,67,67,0.85);
  border-radius: 50%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.scroll-pagination li a.active:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

5. Add custom background to your sections.

.page1 { background-color: #D870A9; }

.page2 { background-color: #3BB0D6; }

.page3 { background-color: #DA4453; }

6. Initialize the plugin on document ready.

$("#main").scrollview()

7. Full options and callbacks.

$("#main").scrollview({

// CSS class for container section
sectionContainer: "section", 

// jQuery easing options
easing: "ease",

// Time between page transitions
animationTime: 1000,

// Shows a side pagination
pagination: true,

// Update page URL
updateURL: false, 

// Compatible with old browsers
supportOld: false,

// Keyboard navigation
keyboard: true,

// callbacks
beforeMove: null,
afterMove: null,

// Enables infinite loop
loop: true,

// 'cover' or 'default'
swipeAnim:"default", 

// Disable the plugin when the screen size reaches the value defined below (e.g. '600')
responsiveFallback: false,

// 'vertical' or 'horizontal'
direction: 'vertical' 

})

Change logs:

2015-03-26

• fixed nav bar's position.

2015-02-05

• fixed for mobile devices.

---

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