Sticky One Page Scroll Navigation With Smooth Scroll – Scroll.js

Preview:

Description:

Scroll.js is a smooth scroll library that provides a basic function to smoothly scroll to an element with a unique class name.

In this example, we’re going to create a sticky side navigation for your one-page scrolling webpage that enables the user to switch between page sections with a smooth scrolling effect.

How to use it:

1. Assign a unique ID name to each page section within the document.

<section class='home'>
  <h3>home</h3>
</section>
<section class='about'>
  <h3>about</h3>
</section>
<section class='service'>
  <h3>service</h3>
</section>
<section class='resume'>
  <h3>resume</h3>
</section>
<section class='works'>
  <h3>works</h3>
</section>
<section class='blog'>
  <h3>blog</h3>
</section>
<section class='contact'>
  <h3>contact</h3>
</section>

2. Insert anchor links pointing the page sections into a nav element.

<nav>
  <div>
    <a href='#home'>Home</a>
    <a href='#about'>About</a>
    <a href='#service'>Service</a>
    <a href='#resume'>Resume</a>
    <a href='#works'>Works</a>
    <a href='#blog'>Blog</a>
    <a href='#contact'>Contact</a>
  </div>
</nav>

3. Make the nav sticky on the page.

nav
{
  position: fixed;
  width: 80px;
  height: 100vh;
  right: 0px;
}
nav div
{
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}
nav span
{
  display: block;
  border: solid 1px rgba(0, 0, 0, 0);
  margin: 15px;
  padding: 5px; 
  font-size: 24px;
  color: #efefef;
}
nav span:hover
{
  background: rgba(0, 0, 0, 0.2); 
  border-radius: 50%;
}

4. Enable the smooth scrolling functionality on the anchor links.

<script type="text/javascript" src='./scroll.js'></script>

window.onclick = (e) => 
{
  e.preventDefault();
  scrollTo(e.target.href.split('#')[1]);
};