ezscroll

A useful tool that helps you to scroll in the browser window with animation. Time to give up window.scrollTo!

Installation

Via npm.

$ npm install ezscroll --save

Via yarn.

$ yarn add ezscroll

Basic Usage

Window scroll

You can simply replace all of your window.scrollTo with ezscroll.

import { scrollTo } from 'ezscroll';

// Same usage as window.scrollTo.
// But will scroll with animation.
scrollTo(0, 0);

Element scroll

You can also scroll inside your element.

import { elScrollTo } from 'ezscroll';

// `element` should be a container element.
elScrollTo(element, 0, 0);

Useful functions

For window scroll

We provide some useful functions which we think are in common use.

import { scrollToTop, scrollToLeft, scrollToRight, scrollToBottom } from 'ezscroll';

// Scroll to the top of the window.
scrollToTop();

// Scroll to the left of the window.
scrollToLeft();

// Scroll to the right of the window.
scrollToRight();

// Scroll to the bottom of the window.
scrollToBottom();

Or you may want some accurate control on one axis.

import { scrollXTo, scrollYTo } from 'ezscroll';

// Scroll to 10 on x axis.
scrollXTo(10);

// Scroll to 50 on y axis.
scrollYTo(50);

All functions above support customize duration and easing functions. For more details please refer to Full API.

import { scrollToTop, scrollXTo } from 'ezscroll';

scrollToTop(duration, easing, callback);
scrollXTo(x, duration, easing, callback);

For element scroll

Similar as above.

import {
  elScrollToTop,
  elScrollToLeft,
  elScrollToRight,
  elScrollToBottom,
  elScrollXTo,
  elScrollYTo,
} from 'ezscroll';

elScrollToTop(element, duration, easing, callback);
elScrollXTo(element, 0, duration, easing, callback);

Full API

Core

scrollTo(x, y, duration, easing, callback);

x: Target scroll position on x axis.
y: Target scroll position on y axis.
duration: Animation duration (in ms).
easing: Easing function that control the animation.
callback: Callback function that will be fired after the scrolling animation.

Easing functions

Now we only provide some basic easing functions as below. You can customize your own easing function and pass it in.

import { Easing } from 'ezscroll';

easing = Easing.Linear;
easing = Easing.Cubic.In;
easing = Easing.Cubic.Out;
easing = Easing.Cubic.InOut;

We use Easing.Cubic.InOut by default.

License

MIT

Ezscroll

Scroll with animation.