Horizontal & Vertical Smooth Scroll Library – scroll-animate-to

Preview:

Description:

The scroll-animate-to JavaScript library animates scrolling to a specified point within the document.

Supports both horizontal and vertical scrolling.

How to use it:

Install and import the library into your main JS.

# NPM
$ npm install scroll-animate-to --save

import ScrollTo from 'scroll-animate-to'

Or include the compiled JavaScript file ‘scroll-animate-to.min.js’ on the page.

<script src="scroll-animate-to.min.js"></script>

Create a new ‘ScrollTo’ object and specify the target element the page scrolls to.

let myScroll = new ScrollTo({
    target: document.getElementById('target')
})

Scroll the page to this target element.

myScroll.scroll()

Apply a custom easing function to the animation.

let myScroll = new ScrollTo({
    target: document.getElementById('target'),
    animationFn: 'easeIn' // "easeIn", "easeOut", "easeInOut", "linear"
})

Set the duration of the animation. Default: 1000ms.

let myScroll = new ScrollTo({
    target: document.getElementById('target'),
    duration: 2000
})

Set the axis the page should scroll in. Default: y (vertical).

let myScroll = new ScrollTo({
    target: document.getElementById('target'),
    axis: 'x'
})

Specify the parent container. Default: the whole window.

let myScroll = new ScrollTo({
    target: document.getElementById('target'),
    container: 'window'
})

Execute a callback when the scroll ends.

let myScroll = new ScrollTo({
    target: document.getElementById('target'),
    callback: function(){}
})

Changelog:

v1.0.4 (12/14/2019)

• format code && publish