Cross Browser jQuery One Page Navigation / Smooth Scrolling Plugin - Full Scroll

File Size: 8.33 KB
Views Total: 5004
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cross Browser jQuery One Page Navigation / Smooth Scrolling Plugin - Full Scroll

Just another simple jQuery plugin used to implement modern full page smooth scrolling for your one page website. The plugin will automatically generates a one page navigation on the right hand side of the web page and supports almost all major browsers and even IE 6/7/8.

Basic usage:

1. Add the required fullscroll.css in the head section of your document.

<link rel="stylesheet" href="fullscroll.css">

2. Add jQuery library and the jquery.fullscroll.js script at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.fullscroll.js"></script>

3. Build the Html structure for your one page website.

<div class="container" id="full-scroll">
  <div class="section">
    <div>0</div>
  </div>
  <div class="section">
    <div>1</div>
  </div>
  <div class="section">
    <div>2</div>
  </div>
  <div class="section">
    <div>3</div>
  </div>
  <div class="section">
    <div>4</div>
  </div>
  <div class="section">
    <div>5</div>
  </div>
  <div class="section">
    <div>6</div>
  </div>
</div>

4. Finally, call the function on the parent element to initialize the plugin.

$("#full-scroll").fullscroll();

5. Default settings available.

// section selector
sectionSelector: '.section',

// middle alignment
middle:true,

// scroll back to the first section as you reach the last
loop: false,

// animation duration in ms (>1000)
animationDuration: 1000, 
animationCD:500,

// easing options
// requires jQuery easing plugin
easing:'swing', 

// CSS3 easing effects
easingcss3: 'ease', 

// Keyboard navigation
keyboard : true, 

// right side pagination
pagination:true, 

// callback events
beforeMove:null,
afterMove:null

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