jQuery Animate Scroll
This is jQuery plugin which allow you to have a smooth page scrolling effect by animating it.
Table of contents
Dependency
This plugin has the following dependency:
- jQuery >= 1.3
Installation
There are four different ways to install or download this jQuery plugin.
Install Using NPM
You can install this jQuery plugin using NPM. Simply run the following command inside your project directory.
npm install jquery-animate-scroll --save
Or you may add jquery-animate-scroll
to your package.json
dependencies:
{ "dependencies": { "jquery-animate-scroll": "~1.0.0" } }
Then run install command:
npm install
Install Using Bower
You may also install this jQuery plugin by leveraging Bower package. Run the following command to install this plugin:
bower install jquery-animate-scroll --save
You may also add this jquery-animate-scroll
package to your bower.json
file like so:
{ "dependencies": { "jquery-animate-scroll": "*" } }
Download Using Git
Another option to install this jQuery plugin is by using git command. Simply clone this repository by running the following command:
git clone https://github.com/risan/jquery-animate-scroll.git
Or if you prefer using ssh:
git clone [email protected]:risan/jquery-animate-scroll.git
Manual Download
You can also install this plugin by simply downloading it from:
Or if you prefer the minimized version:
Usage
There are numbers of way to use this plugin:
$(selector).animateScroll( options )
$.scrollTo( $target, options )
$(selector).scrollHere( options )
And each of these methods has the same options:
$container
is an element that has the scroll, default:$(html,body)
speed
is the duration to perform the scroll animation in milliseconds, default: 400offset
is the offset in pixels, default: 0
$(selector).animateScroll( options )
Using For example you have the following markup on your page:
<a href="#article-1">Go To Article One</a> ... <h1 id="article-1">Article One</h1>
Now to turn the anchor have an animated scroll effect, add the following line inside your javacript code:
$('a').animateScroll();
The above code will initialize the animate scroll plugin. You may also pass some options like this:
$('a').animateScroll({ $container: $('body'), speed: 1000, offset: -100 });
You may also set speed
and offset
options using HTML data attribute like so:
<a href="#article-1" data-speed="1000" data-offset="-100">Go To Article One</a>
You may check the demo file: demo/animate-scroll.html
$.scrollTo( $target, options )
Using Now to use the $.scrollTo( $target, options )
, consider we have the following HTML markup:
<a href="#" id="link-1">Go To Article One</a> ... <h1 id="article-1">Article One</h1>
To turn the anchor to have an animated scroll, use the following code:
$('#link-1').click(function( e ) { // Prevent default behaviour. e.preventDefault(); // Scroll to article one. $.scrollTo( $('#article-1') ); });
You may also pass the options like so:
$.scrollTo( $('#article-1'), { $container: $('body'), speed: 1000, offset: -100 });
You may check the demo file: demo/scroll-to.html
$(selector).scrollHere( options )
Using And the last method you may use is the $(selector).scrollHere( options )
. For example, consider you have the following HTML markup on your page:
<a href="#" id="link-1">Go To Article One</a> ... <h1 id="article-1">Article One</h1>
To activate the animated scroll, here is the sample code:
$('#link-1').click(function( e ) { // Prevent default behaviour. e.preventDefault(); // Scroll to article one. $('#article-1').scrollHere(); });
To pass the options, you can do it like this:
$('#article-1').scrollHere({ $container: $('body'), speed: 1000, offset: -100 });
You may check the demo file: demo/scroll-here.html