|File Size:||14.2 KB|
|Official Website:||Go to website|
RowScroll is a super tiny (~2k minified) jQuery plugin which provides smooth vertical scrolling effects for your one page website and single page applications.
- 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
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;