In Short: Just install, reference in HTML page, and start adding links and elements with corresponding anchor IDs.
There are just three (3) basic steps to use this module and enable smoothing scrolling between page elements:
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):
$ npm install vanilla-smooth-scroll --save && npm intall
$ yarn add vanilla-smooth-scroll
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>
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.
<!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>