vanilla-smooth-scroll
v1.0.0
Published
Simple and fast module allowing a configuration-free, drop-in implementation of smooth scrolling between page anchors (dependency-free and built using vanilla javascript).
Downloads
1
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 intallOR...
Using Yarn:
$ yarn add vanilla-smooth-scrollStep 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 © 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>