Scroll To Specific Section/Position/Point Within The Document – VanillaSmoothie.js

Category: Animation , Javascript | September 2, 2019
Author: kimulaco
Views Total: 414
Official Page: Go to website
Last Update: September 2, 2019
License: MIT

Preview:

Scroll To Specific Section/Position/Point Within The Document – VanillaSmoothie.js

Description:

A vanilla JavaScript smooth scroll library to smoothly scroll the webpage (or a certain container) to a specific anchor link or position/point within the document.

How to use it:

Install and Import the VanillaSmoothie.js.

# NPM
$ npm install vanilla-smoothie --save
import vanillaSmoothie from 'vanilla-smoothie';

Or directly insert the compiled version of the VanillaSmoothie.js library in the document.

<script src="vanilla-smoothie.min.js"></script>

Scroll the webpage to a specific section or a specific point. Possible parameters:

  • target: target element: selector or offset
  • option: options (optional)
  • callback: trigger an event when the scroll is finished (optional)
vanillaSmoothie.scrollTo(target, option, callback);

Scroll the webpage to the top. Ideal for back to top button.

vanillaSmoothie.scrollTop(option, callback);

Scroll the webpage to the bottom. Ideal for back to top button.

vanillaSmoothie.scrollBottom(option, callback);

Optional settings.

{

  // element to scroll
  element: window,

  // duration of animation
  duration: 500,

  // adjust the scroll position
  adjust: 0,

  // easing name
  easing: 'linear'

}

Changelog:

v2.0.0 (09/02/2019)

  • Replace to TypeScript.
  • Change method parameters.
  • Add adjust option.
  • Add Travis CI and pre-commit lint.

05/26/2019

  • v1.2.4: updated

05/16/2019

  • v1.2.3: updated

04/27/2019

  • v1.2.2: update easing option

You Might Be Interested In:


Leave a Reply