Cross-browser One Page Scroll Plugin With jQuery - singleFull.js
File Size: | 821 KB |
---|---|
Views Total: | 7705 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery implementation of the popular, smooth one page scrolling effect for your fullscreen pages or single page web application.
Features:
- Supports all modern browsers and even IE 7/8.
- Auto scrolls back to the first section as you reach the bottom.
- Supports mouse wheel.
- Side navigation.
- Mobile friendly and touch swipe supported.
How to use it:
1. The html structure to create a fullscreen page with a vertical side navigation.
<div id="single"> <div data-target="home" id="home"> Home </div> <div data-target="about" id="about"> About </div> <div data-target="examples" id="examples"> Examples </div> <div data-target="contact" id="contact"> Contact </div> <!-- vertical nav --> <div id="fp-nav" class="right" style="margin-top: -43.5px;"> <ul> <li><a href="#" class="active" data-anchor="home"><span></span></a> <div class="fp-tooltip right">Home</div> </li> <li><a href="#" data-anchor="about"><span></span></a> <div class="fp-tooltip right">About</div> </li> <li><a href="#" data-anchor="examples"><span></span></a> <div class="fp-tooltip right">Examples</div> </li> <li><a href="#" data-anchor="contact"><span></span></a> <div class="fp-tooltip right">Contact</div> </li> </ul> </div> </div>
2. Place jQuery library, jQuery easing plugin and the jQuery singleFull.js script at the end of the document so the page loads faster.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.easing.min.js"></script> <script src="js/jquery.singlefull.js"></script>
3. Initialize the plugin.
$("#single").singlefull();
4. Style the fullscreen page and its side navigation.
* { padding: 0; margin: 0; } div[data-target] { margin: 0; padding: 0; position: relative; overflow: hidden; } div[data-target] > div { text-align: center; position: relative; } #fp-nav { position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1; -webkit-transform: translate3d(0, 0, 0); } #fp-nav.right { right: 17px; } #fp-nav.left { left: 17px; } .fp-slidesNav { position: absolute; z-index: 4; left: 50%; opacity: 1; } .fp-slidesNav.bottom { bottom: 17px; } .fp-slidesNav.top { top: 17px; } #fp-nav ul, .fp-slidesNav ul { margin: 0; padding: 0; } #fp-nav ul li { display: block; width: 14px; height: 13px; margin: 7px; position: relative; } .fp-slidesNav ul li { display: block; width: 14px; height: 13px; margin: 7px; position: relative; display: inline-block; } #fp-nav ul li a, .fp-slidesNav ul li a { display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none; } #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span { height: 12px; width: 12px; margin: -6px 0 0 -6px; border-radius: 100%; } #fp-nav ul li a span, .fp-slidesNav ul li a span { border-radius: 50%; position: absolute; z-index: 1; height: 4px; width: 4px; border: 0; background: #333; left: 50%; top: 50%; margin: -2px 0 0 -2px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span { width: 10px; height: 10px; margin: -5px 0px 0px -5px; } #fp-nav ul li .fp-tooltip { position: absolute; top: -2px; color: #fff; font-size: 14px; font-family: arial, helvetica, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; opacity: 0; width: 0; cursor: pointer; } #fp-nav ul li:hover .fp-tooltip { -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; width: auto; opacity: 1; } #fp-nav.fp-show-active a.active + .fp-tooltip { -webkit-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; width: auto; opacity: 1; } #fp-nav ul li .fp-tooltip.right { right: 20px; } #fp-nav ul li .fp-tooltip.left { left: 20px; } .fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell { height: auto !important; }
5. Plugin's options and defaults.
$("#single").singlefull({ // scrolling speed scrollingSpeed: 1000, // easing effect easing: "easeOutExpo", // data attribute for content sections section: 'data-target', // data attribute for anchor links anchor: 'data-anchor', // enable keyboard navigation keyboard: true, // endless looping loopScroll: true, loopTop: true, loopBottom: true, // side navigation options navigation: true, navigationPosition: 'right', // suffixes for responsive images sufixes: { smallest: "-smallest", small: "-small", medium: "-medium", normal: "" // Leave blank for no prefix } });
This awesome jQuery plugin is developed by AdvancedCat. For more Advanced Usages, please check the demo page or visit the official website.