Fast Smooth Scroll To Functionality In Pure JavaScript – scroll.js

Preview:

Description:

scroll.js is a performant, blazing fast scroll to library in pure JavaScript that smoothly scrolls the whole page to a specific point (or element) within the document.

How to use it:

Install and import the scroll.js into your module.

# NPM
$ npm install scroll-js --save
# Bower
$ bower install scroll-js --save

// ES 6
import Scroll from 'scroll-js';
// CommonJS:
const Scroll = require('scroll-js');

Or directly include the ‘scroll-min.js’.

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

Initialize the Scroll.js.

var scroll = new Scroll(document.body);

Scroll the element until it’s scroll properties match the coordinates provided. Possible parameters:

• x: The pixel along the horizontal axis of the element that you want to display in the upper left.
• y: The pixel along the vertical axis of the element that you want to display in the upper left.
• options.duration: The amount of time for the animation
• options.easing: The easing function to use

// scroll.to(x, y, option)
scroll.to(200, 300)

Scroll to a specific element within the document.

// scroll.toElement(element, option)
var myEl = document.getElementById("el");
scroll.toElement(myEl)

Execute a function after scrolling.

scroll.to(0, 500).then(function () {
  //scrolling down 500 pixels has completed!
});

Changelog:

10/21/2018

• Fix inaccurate current scroll position