Performant Smooth Scroll JavaScript Library – smoothie

Preview:

Description:

A lightweight, performant JavaScript smooth scroll library which enables the page/anchor links to smoothly scroll between sections using Element.scrollIntoView() API.

Install & import:

Install the smoothie:

# Yarn
$ yarn add smoothie-js
# NPM
$ npm install smoothie-js --save

Import it into your project.

// ES 6
import smoothie from 'smoothie';

Or load the UMD version in the HTML.

<script src="https://unpkg.com/smoothie-js"></script>

Usage:

Add the ‘data-smoothie’ attribute to the anchor links that point to different content sections within the document.

<a href="#about" class="nav-link" data-smoothie>About</a>
<a href="#portfolio" class="nav-link" data-smoothie>Portfolio</a>
<a href="#blog" class="nav-link" data-smoothie>Blog</a>
<a href="#contact" class="nav-link" data-smoothie>Contact</a>
<main>
  <!-- main -->
  <div class="container" id="about">
    <h1>About</h1>
  </div>
  <div class="container" id="portfolio">
    <h1>Portfolio</h1>
  </div>
  <div class="container" id="blog">
    <h1>Blog</h1>
  </div>
  <div class="container" id="contact">
    <h1>Contact</h1>
  </div>
</main>

Activate the library and done.

smoothie();

Changelog:

08/02/2020

• v1.0.6