Touch-friendly Smooth Page Scrolling Plugin For jQuery - RowScroll

File Size: 14.2 KB
Views Total: 4360
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Touch-friendly Smooth Page Scrolling Plugin For jQuery - RowScroll

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)


This awesome jQuery plugin is developed by ericbutler555. For more Advanced Usages, please check the demo page or visit the official website.