AnimateScroll - A jQuery plugin for animating scroll

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

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.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: plugins.compzets.com

1. INCLUDE JS FIlES

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="animatescroll.js">

2. HTML

<div id="section-1">This is the element where you want to scroll to<div>
<a onclick="$('[id-or-class-of-element]').animatescroll();">Go to Element</a>

3. 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)

4. 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'});