scrollTo

ScrollTo is a module that will scroll to a specified element or position on a page with animated movement. It takes advantage of the native window.requestAnimationFrame() method to ensure smooth animation.

Please note that several native scrolling methods exist with animation capabilities, including Element.scrollTo(), Window.scrollTo(), and Element.scrollIntoView(). If these native methods meet your needs, we recommend using them in favor of this module.

Demo

You can view a demo of scrollTo here.

Install

ScrollTo is an ES6 module. Consequently, you'll need an ES6 transpiler (Babel is a nice one) as part of your Javascript workflow.

If you're already using NPM for your project, you can install scrollTo with the following command:

$ npm install @degjs/scroll-to

Usage

import scrollTo from "@degjs/scroll-to";

/* Scroll to an element with a 1-second, eased-in animation */
let destinationElement = document.querySelector('.some-element');
scrollTo({
    element: destinationElement,
    duration: 1000,
    easing: 'easeIn'
});

Parameters

options

Type: Object

options.element

Type: Element
The element to scroll to. This option or the position option is required.

options.position

Type: Number
The vertical position (in pixels) on the page to scroll to. This option or the element option is required.

options.duration

Type: Number Default: 500
The duration (in milliseconds) of the scroll animation. This option is optional.

options.easing

Type: String Default: easeOut
The easing function for the animation. This option is optional. Valid values are:

• linear
• easeIn
• easeOut
• easeInOut

Browser Support

ScrollTo depends on the following browser APIs:

• window.requestAnimationFrame (Note: scrollTo will still technically function if window.requestAnimationFrame is not supported, but the scrolling movement will be instantaneous with no animation)
• Object.assign

To support legacy browsers, you'll need to include polyfills for the above APIs.