Touch-friendly Smooth Page Scrolling Plugin For jQuery - RowScroll
File Size: | 14.2 KB |
---|---|
Views Total: | 4366 |
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.