Basic Full Window Page Scoll Plugin with jQuery - PageScroll
File Size: | 49.2 KB |
---|---|
Views Total: | 5000 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

PageScroll is a really simple jQuery one page scroll plugin that allows the visitor to scroll vertically or horizontally through sectioned content of your single page website/application with mouse wheel, keyboard or side naivigation. Scroll snapping behavior is supported as well.
How to use it:
1. Import jQuery library and the jQuery pagescroll plugin into the html page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/PageScrollfb.js"></script>
2. Add content sections to your single page website / web application.
<div id="container"> <div class="sections"> <div class="section section-1">Section One</div> <div class="section section-2">Section Two</div> <div class="section section-3">Section Three</div> <div class="section section-4">Section Four</div> </div> </div>
3. The core CSS styles.
* { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; overflow: hidden; } #container, .sections { height: 100%; width: 100%; position: relative; } .section { width: 100%; height: 100%; text-align: center; color: white; font-size: 40px; font-family: "open sans", Simsun, Tahoma; padding-top : 50px; position: relative; }
4. Style the side navigation.
.vertical { position: fixed; list-style: none; right: 10px; top: 50%; } .vertical > li { width: 8px; height: 8px; border-radius: 50%; background: #fff; margin: 0 0 10px 5px; } .vertical > li.active { width: 14px; height: 14px; border: 2px solid #FFFE00; background: none; margin-left: 0; }
5. Initialize the plugin to generate a vertical one page scrolling website.
$("#container").PageScroll();
6. Customizable options.
$("#container").PageScroll({ // html structure selectors : { sections : ".sections", section : ".section", page : ".pages", active : ".active" }, // index slide index : 0, // easing effect easing : "ease", // transition duration duration : 500, // enable infinite loop loop : false, // enable pagination pagination : true, // enabke keyboard events keyboard :true, // vertical or horizontal direction : "vertical", // callback function callback : "" });
Change log:
2015-11-28
- update
2015-10-27
- added horizontal sliding.
2015-10-15
- Update PageScroll.js
This awesome jQuery plugin is developed by javion25. For more Advanced Usages, please check the demo page or visit the official website.