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

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.