Performant Smooth Scroll JavaScript Library – smoothie

Category: Animation , Javascript | October 19, 2018
Author: marlospomin
Views Total: 1,401
Official Page: Go to website
Last Update: October 19, 2018
License: MIT

Preview:

Performant Smooth Scroll JavaScript Library – smoothie

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';

// CommonJS:
const selectionPopup = require('smoothie');

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:

10/19/2018

  • v1.0.3

You Might Be Interested In:


Leave a Reply