scroll-to-position v1.7.19

scroll-to-position

Animate scroll to either an x, y, or x and y position in any scrollable viewport with customisable easing.

Demo

Install

You can install via npm or yarn.

npm

npm install --save scroll-to-position

yarn

yarn add scroll-to-position

Usage

Importing

You can import using ES6 imports.

import { ScrollTo } from 'scroll-to-position';

Arguments

ScrollTo accepts two arguments:

target: either a position (positionX, positionY) or a HTML Element (e.g. a reference to a div).

options (optional): an object of configuration options - see the options section below.

Examples

Position

ScrollTo([0, 100]);

Element

const myElement = document.querySelector('.MyElement');
ScrollTo(myElement);

Note: if you're using TypeScript you will most likely need to cast your element to a HTMLElement, as document.querySelector returns a Element type.

Callback

Calling ScrollTo returns a Promise, so it is possible to run your own code after scrolling has completed.

ScrollTo([0, 100]).then(() => console.log('Scrolling completed'));

If cancelOnUserScroll is enabled and the user interrupts scrolling, then the promise rejects and can be caught using Promise.prototype.catch

ScrollTo([0, 100])
  .then(() => console.log('Scrolling completed'))
  .catch(() => console.log('User interrupted scrolling'));

Options

When calling ScrollTo you can provide an options object, with values to override the defaults.

Option Parameters

Example of providing options

ScrollTo([0, 100], {
  duration: [300, 1000],
  easing: 'easeInOutSine',
});

Using the easing enum in TypeScript

import { ScrollTo, Easing } from 'scroll-to-position';

ScrollTo([0, 100], {
  duration: [300, 1000],
  easing: Easing.easeInQuad,
});

Extras

An autoScroll boolean is added to the window which you can use in your scroll event listeners to check if the window is being autoScrolled by this package.