README

vanilla-smooth-scroll

Simple, dependency-free, vanilla Javascript module providing a configuration-free, drop-in implementation of smooth-scrolling between page anchors.

Description

In Short: Just install, reference in HTML page, and start adding links and elements with corresponding anchor IDs.

Overview

There are just three (3) basic steps to use this module and enable smoothing scrolling between page elements:

Step One: Install the module

The easiest way is to use either NPM or Yarn. In order to do so, enter ONE of the following two lines into your terminal (while in your project's root directory):

Using NPM:

$	npm install vanilla-smooth-scroll --save && npm intall

OR...

Using Yarn:

$	yarn add vanilla-smooth-scroll

Step Two: Reference it to include the code

Place the following either in the <head> element or at the bottom of the <body> element:

<script src="./node_modules/vanilla-smooth-scroll/vanilla-smooth-scroll.js"></script>

Step Three: Enabling and using smooth-Scrolling

Implement like this:

<nav role="naviation">
    <ul>
        <li><a href="#section-one">Section One</></li>
        <li><a href="#section-one">Section Two</></li>
        <li><a href="#section-one">Section Three</></li>
    </ul>
</nav>

<!-- ... -->

<main role="main">

    <section id="section-one">
        <!-- ... -->	
    </section>

    <section id="section-two">
        <!-- ... -->	
    </section>
    
    <section id="section-three">
        <!-- ... -->	
    </section>

    <!-- ...and so on... -->	
</main>

Note: Remember, the link (`<a>`) elements' `href` values must match the `id` values of the elements you wish to smooth-scroll to.

So the full HTML page might look something like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Smooth Scrolling Example Project</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    
    <nav role="navigation">
        <ul>
            <li><a href="#section-one">Section One</a></li>
            <li><a href="#section-two">Section Two</a></li>
            <li><a href="#section-three">Section Three</a></li>
        </ul>
    </nav>

    <header role="banner">
        <hgroup>
            <h1>Heading One</h1>
            <h2>Heading Two</h2>
        </hgroup>
    </header>

    <main role="main">
    
    <section id="section-one">
        <h3>Section Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Adipisci beatae excepturi id inventore laboriosam
        minus suscipit? Alias deserunt dolorum error exercitationem
        nemo nesciunt, officia praesentium quidem recusandae vitae.
        Possimus, quia?</p>
    </section>
    
    <section id="section-two"> <!-- ... --> </section>
    
    <section id="section-three"> <!-- ... --> </section>
    
    <!-- ...and so on... -->	
    </main>

    <footer role="contentinfo">
        <p>Copyright &copy; 2020. All Rights Reserved.</p>
    </footer>

    <script src="scripts/main.js"></script>
    <script src="../../node_modules/vanilla-smooth-scroll/vanilla-smooth-scroll.js"></script>
</body>
</html>

Usage no npm install needed!