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

Category: Animation , Javascript | October 21, 2018
Author:mkay581
Views Total:2,258 views
Official Page:Go to website
Last Update:October 21, 2018
License:MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply