🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

autoscroll.js(verticalScroller.js) is very small jQuery plugin which helps you implement smooth, automatic, vertical scrolling effects on any scrollable area.

smooth-scroll scrolling scroller Auto-scroll

Documentation

Codacy Badge npm Gitter

autoscroll.js

Auto Scroll is a Jquery plugin which is used to auto-scroll your content smoothly . It is less than 1KB when minified.

How To use Auto Scroll

It is very easy to install, just copy and paste the autoscroll.js in your js root folder and then initialize its path in your html file. It's better to initialize it in head tag.

<head>  <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>   <script src="path/to/autoscroll.js"></script> </head> 

** Dependency : It depends on jquery. So initialize jquery before autoscroll.js**

Download autoscroll.js

Using npm

npm install autoscroll.js 

Install using bower

bower install autoscroll.js 

General Notes

Initialize

With jQuery

$('element').scroller();

With vanilla JavaScript

var scroll = new Scroller('{"element" : element }');

With HTML

Add a data-config attribute to your element and a class scroller. Options can be set in JSON in the value.

<div class="scroller" id="id-1" data-config='{ "amount": 150, "delay": 1500 }'>   <div class="item"></div>   <div class="item"></div>   ... </div>

Note: element can be id or class or any html tag

Default options

{"amount" : 100 , "delay" : 2000 } //2000ms and 100px 

Add your options

{"amount" : 200 , "delay" : 1500 } 

Example

for a div tag having id named "id-1"

<div id="id-1"></div> 

you can initialize it like this

$("#id-1").scroller('{"amount" : 150, "delay" : 1500 }'); 

OR

var scroll = new Scroller('{"element" : "#id-1", "amount" : 150, "delay" : 1500 }'); 

OR

By using HTML

<div class="scroller" id="id-1" data-config='{ "amount": 150, "delay": 1500 }'>   <div class="item"></div>   <div class="item"></div>   ... </div>

License

Copyright (c) 2016 Ankit Jain - Released under the MIT License

Run this script in your browser... Enjoy Cheers !!


You May Also Like