Animated JavaScript window scroll

Download on GitHub. Or install it from npm

npm install animated-scroll-to

Usage

import animateScrollTo from 'animated-scroll-to';

// desiredOffset - page offset to scroll
// options - object with options

// default options
const options = {
  // duration of the scroll per 1000px, default 500
  speed: 500,

  // minimum duration of the scroll
  minDuration: 250,

  // maximum duration of the scroll
  maxDuration: 3000,

  // should animated scroll be canceled on user scroll/keypress
  // if set to "false" user input will be disabled until animated scroll is complete
  cancelOnUserAction: true
};

animateScrollTo(desiredOffset, options);

What is this?

This is a plain JavaScript animated scroll to function. It has easing, and accepts speed per 1000px rather than duration. Then function recalculates the duration, and sets the minimum of 250ms or maximum of 3000ms. If you give it offset which is larger from the maximum scroll value, it will use latter. Also it disables user scrolling while scroll animation is in progress.

Script doesn't prevent multiple calls of it.

It is written using ES6 JavaScript, but transpiled version is included as well. To build it yourself you'll need to install npm dependencies.

# Run only for the first time
npm install

# Transpiles ES6 to ES5
npm run build

# Watches ES6 file for changes and transpiles on the fly
npm run watch

Why?

I wasn't able to find standalone, simple and working solution.

Browser support

Anything that supports "requestAnimationFrame", meaning IE10+. If you want to use it on the older IEs, just provide a polyfill for it.

It is missing <insert feature here>

I really tried to keep simple and lightweight. If you are missing something, feel free to add it and open a pull request.