Pure JavaScript Smooth Scroll With Easing Effects – skrollTop.js

Category: Animation , Javascript | May 18, 2018
Author: alvarotrigo
Views Total: 354
Official Page: Go to website
Last Update: May 18, 2018
License: MIT

Preview:

Pure JavaScript Smooth Scroll With Easing Effects – skrollTop.js

Description:

skrollTop.js is a pure JavaScript smooth scroll plugin that smoothly scrolls the page to a specific point within the document. Without any dependencies.

How to use it:

To get started, insert the ‘skrollTop.js’ script into the html file.

<script src="skrollTop.js"></script>

Include the ‘easings.js’ library for more easing functions (OPTIONAL).

<script src="easings.js"></script>

Scroll the webpage to a specific position at a given speed:

skrollTop.scrollTo({
  to: 200, // 200px
  duration: 600, // 600ms
});

Add an additional easing effect to the smooth scroll animation.

skrollTop.scrollTo({
  to: 200, // 200px
  easing: window.easings.easeOutBounce,
  duration: 600
});

Execute a function when the smooth scroll is completely finished.

skrollTop.scrollTo({
  to: 200,
  easing: window.easings.easeOutBounce,
  duration: 600,
  callback: function() {
    console.log("finished!");
  }
});

Leave a Reply