Touch-friendly Smooth Page Scrolling Plugin For jQuery - RowScroll
| File Size: | 14.2 KB |
|---|---|
| Views Total: | 4384 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
RowScroll is a super tiny (~2k minified) jQuery plugin which provides smooth vertical scrolling effects for your one page website and single page applications.
Main Features:
- Supports both mouse wheel and touch swipe.
- Auto snaps to next / prev section on page scrolling.
- Section height can be the full viewport height (as shown here), a fixed pixel height, or whatever.
How to use it:
1. Load the necessary jQuery library and jQuery MouseWheel plugin before you include the jQuery RowScroll plugin.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.mousewheel.min.js"></script> <script src="/path/to/rowScroll.min.js"></script>
2. Add a scroll-target class to each page section you want your visitors to auto-scroll to. Use div, section>, or any other element you prefer for your page sections.
<div class="scroll-target"> ... </div> ...
3. That's it. You can override the default settings using the following parameters.
var scrollTargets = $('.scroll-target'),
scrollTops = [],
// amount of px to add to/subtract from scroll tops when evaluating where to scroll to
wiggleRoom = 10,
// amount of milliseconds to take to get to the next/previous scroll target
scrollSpeed = 400,
// get total count of how many scroll targets there are
totalScrollTargets = scrollTargets.length,
// used in touchmove event handl
lasttmX = 0,
lasttmY = 0;
Change log:
v1.1.1 (2016-01-08)
- update
This awesome jQuery plugin is developed by ericbutler555. For more Advanced Usages, please check the demo page or visit the official website.











