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

Category: Javascript , Menu & Navigation | February 3, 2020
Views Total:4,663 views
Official Page:Go to website
Last Update:February 3, 2020


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


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'>
<section class='about'>
<section class='service'>
<section class='resume'>
<section class='works'>
<section class='blog'>
<section class='contact'>

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

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

3. Make the nav sticky on the page.

  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) => 

You Might Be Interested In:

Leave a Reply