Animate scroll JavaScript / jQuery – animatescroll.js

AnimateScroll – a Simple jQuery Plugin for animating scroll!

Animate scroll in JavaScript, smooth effect, configurable speed, easing and offset

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.

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.

Usage

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

Smooth scroll with animateScroll.js plugin
Smooth scroll with animateScroll.js plugin

Setup

The only dependency for this plugin to work is jQuery library.

<html>
  <head>
    <script src="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>
    <!--or use event listener-->
    <a onclick="$('[jquery selector]').animatescroll([options]);">
      Go to Element
    </a>
  </body>
</html>

Options

AnimateScroll has 6 options:

easing

scrollSpeed

padding

element

onScrollStart

onScrollEnd

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.

The different easing effects are: swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce. Huh.

License: MIT

Homepage

https://plugins.compzets.com/animatescroll

GitHub

https://github.com/rampatra/animatescroll.js

scraperapi

See also

jQuery circular carousel plugin

pagePiling.js – create scrolling pile of sections

Vue.js scroll to element solutions

jQuery scroll to anchor – jquery.anchorScroll plugin

jQuery nice scrollbars solutions

CSS3 and jQuery single page scrolling plugin – singular.js

Enjoy!