Home/ Questions/Q 598

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 62k
Asked: 2024-11-25T12:21:07+00:00

Implementing Smooth Scroll Using Javascript ⚡

  • 62k

Hello Everyone 👋🏻, today we will be looking at how to implement smooth scrolling behavior using the scrollIntoView property.

Normally for the creation of Navbar, we use this code. 

    <nav class="navbar" id="nav--bar">         <ul>             <li><a href="#1" class="link--a">DIV 1</a></li>             <li><a href="#2" class="link--a">DIV 2</a></li>             <li><a href="#3" class="link--a">DIV 3</a></li>         </ul>     </nav>
Enter fullscreen mode Exit fullscreen mode

But when we click on the element it takes us to the element with the id provided in href. This is how a normal scrolling effect looks like 👇🏻

ezgif.com-gif-maker.gif

So what can we do for a smooth scrolling effect ?

HTML CODE 

    <nav class="navbar" id="nav--bar">         <ul>             <li><a href="#1" class="link--a">DIV 1</a></li>             <li><a href="#2" class="link--a">DIV 2</a></li>             <li><a href="#3" class="link--a">DIV 3</a></li>         </ul>     </nav>     <section id="1">         <div class="div div--1">This is DIV 1</div>     </section>     <section id="2">         <div class="div div--2">This is DIV 2</div>     </section>     <section id="3">         <div class="div div--3">This is DIV 3</div>     </section>      <script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode

CSS CODE

This code depends on personal choices as this will affect the design part! 

body {   margin: 0;   display: flex;   flex-direction: column;   justify-content: space-around;   align-items: center; } .div--1 {   background-color: rgb(0, 132, 255); } .div--2 {   background-color: rgb(255, 136, 0); } .div--3 {   background-color: rgb(255, 0, 242); } .navbar ul {   display: flex;   justify-content: space-around;   background-color: rgb(179, 230, 245);   list-style: none;   padding: 1.5em;   border-radius: 12px;   border: 1px solid black; } .navbar ul li a {   background-color: yellow;   padding: 1em;   border-radius: 12px;   border: 1px solid black;   text-decoration: none; } .navbar ul li:hover {   background-color: orangered;   cursor: pointer; } .navbar {   width: 90%; } section {   width: 75%; } .div {   margin: 1em;   border-radius: 12px;   border: 1px solid black;   font-size: 5em;   height: 80vh;   display: flex;   align-items: center;   justify-content: space-around; }
Enter fullscreen mode Exit fullscreen mode

JS CODE

The Most Important Part !! 

document.getElementById('nav--bar').addEventListener('click', function (e) {     e.preventDefault();     const target = e.target;     if (target.classList.contains('link--a')) {         const id = target.getAttribute('href').slice(1);         document.getElementById(id).scrollIntoView({ behavior: 'smooth' });     } });
Enter fullscreen mode Exit fullscreen mode

Now let's Focus on JS code and understand how each line works!

  1. We are having this block of code at the top. This says that the document targets the element who is having the id “nav-bar” and adds an event listener on it which will listen to the event (click) on it. And if a click happens on that event then call the function which is having parameter e which will represent the event. 
document.getElementById('nav--bar').addEventListener('click', function (e) { });
Enter fullscreen mode Exit fullscreen mode

2.The prevent Default function will prevent the auto-scrolling due to the anchor tag. And such help us to implement smooth scrolling. In the target variable, we will store the location at which point the click event happened so we can know that exactly on which link the user clicked. 

e.preventDefault(); const target = e.target;
Enter fullscreen mode Exit fullscreen mode

3.This if loop will help us to target only those clicks which are on elements having class “link–a”. 

if (target.classList.contains('link--a')) { }
Enter fullscreen mode Exit fullscreen mode

4.In variable id we will be saving the value given in href attribute of the element where the event (click) occurred. As we have given “#1” in href we need to cut the '#' and store the remaining value. 

const id = target.getAttribute('href').slice(1);
Enter fullscreen mode Exit fullscreen mode

5.This will now target the element which is having the id the same as the value stored in the id variable and apply the “scrollIntoView” method on it with smooth behavior as we mentioned in it. 

document.getElementById(id).scrollIntoView({ behavior: 'smooth' });
Enter fullscreen mode Exit fullscreen mode

This will give us output like this 👇🏻

ezgif.com-gif-maker(1).gif

Great 🎉 We have successfully implemented the smooth scroll!

You can check the difference between both these effects will give professional look to your website!

Normal Smooth Scroll
ezgif.com-gif-maker.gif ezgif.com-gif-maker(1).gif

STAY TUNED FOR MORE 😄
GET CONNECTED WITH ME

Twitter
LinkedIn

javascriptwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,