AnimateScroll A Simple jQuery Plugin for Animating Scroll

   



  

What is it exactly?

AnimateScroll is a jQuery plugin which enables you to scroll to any part of the page in style by just calling the animatescroll() function with the Id or Classname of the element where you want to scroll to.

Basic usage:

$('body').animatescroll();

It gives power to the user with its various options to customize the style of scrolling, scroll speed and many more. Supports more than 30 unique Scrolling Styles.

Options

AnimateScroll has 3 options:

  • easing
  • scrollSpeed
  • padding

easing : This option defines the scrolling style. The various easing effects supported can be seen at easings.net (Accepts string only)

scrollSpeed : Controls the scrolling speed, higher is the number slower is the scroll speed (Accepts only number)

padding : Adjusts little ups and downs in scrolling. Suppose a small amount of padding is applied to a particular element due to which the scroll didn't end at the right position, so this option helps you to rectify (Accepts numbers only, can be negative)

Added in v1.0.5

4th option:

  • element

element : The element in which you want this plugin to work. Default is "body". (Accepts any jQuery/CSS selector)

For Example:

to scroll to the last paragraph within this "div" element

This "div" element has a class-name "element-demo" which is the value passed for "element" option while calling the plugin.

Compzets.com is India's first open source software and freeware publishing site, Download and Upload Open source software and Freeware relevant to the Paid ones for PC,Mac and Linux.

It also makes its own Cloud Applications for making tasks easy. Recently it has launched a new Plugin Showcase too.

This website is your source of unprecedented access to all kinds of pc,mac or linux software (Open Source or Freeware only) with detailed coverage of tech infos along with multiple screen shots and moreover you can not only download your favorite gadgets but you can also UPLOAD your own software to reach thousand of audience. Stay connected to all the latest happenings in the gadget world,with regular updates on new software and announcements with the help of our RSS Feed,just at a few clicks!

The word "Compzets" does not have a literal meaning,it is just derived from the word Gadget which is related to Electronic devices where as Compzets is related to Computer software which are nothing but gadgets for computer.

Thanks to Ronan DMP for asking this feature!

The Code is like:
$('#last-paragraph').animatescroll({element:'.element-demo',padding:20});

Easing Effects

This plugin supports more than 30 different styles of scrolling. The easing option lets you choose a particular style of scrolling according to your choice.

Some of them are shown here:

$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutBack'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});
$('#section-2').animatescroll({scrollSpeed:3000,easing:'easeOutElastic'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInQuad'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutQuad'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutQuad'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInCubic'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutCubic'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutCubic'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInQuart'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutQuart'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutQuart'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInQuint'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutQuint'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInSine'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutSine'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeInOutSine'});
$('#section-2').animatescroll({scrollSpeed:2000,easing:'easeOutBack'});
Click the buttons below for a demo:





































Usage

You need two things for this plugin to work, one is "jQuery library" and the other "animatescroll.js" file

Just include the "animatescroll.js" file after the "jQuery library" as shown in the code snippet below and you're done

NOTE: The only dependency for this plugin to work is jQuery library and of course javascript must be enabled in your browser
                                    
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="animatescroll.js">
    </head>
    <body>
        <div id="section-1">This is the element where you want to scroll to<div>
        
        // You may call the function like this
        <a onclick="$('[id-or-class-of-element]').animatescroll();">Go to Element</a>
    </body>
</html>
                                    
                                


About Me

My name is Ram Patra. I am an App Developer and like making Web Applications, Plugins, and Software for computers, etc.

This is my first jQuery Plugin and I hope you all like it. You are free to make more improvements to the code and can do the same @github.

If my plugin helped you or for any issues, tweet to me @ram__patra. I will be happy to hear from you.

Credits

Responsive Menu by Stéphanie Walter