0

I need to add a smooth scroll effect everytime a link in my navbar is clicked. Here's the navbar:

  <header class="navbar">
    <div class="navElements">
      <div class="logo">
        <img src="./logo.png" alt="Millennium" />
      </div>
      <div class="hamburger">
        <input type="checkbox" id="check" />
        <label for="check" class="checkButton">
          <i class="fas fa-bars" style="font-size: 35px"></i>
        </label>
      </div>
    </div>
    <div>
      <ul class="navItems">
        <li><a href="#home" class="navItem active">HOME</a></li>
        <li><a href="#services" class="navItem">SERVICES</a></li>
        <li><a href="#projects" class="navItem">PROJECTS</a></li>
        <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
        <li><a href="#contact" class="navItem">CONTACT</a></li>
      </ul>
    </div>
  </header>

What do I need to add? And to which class? I have added id for every section in the body

<div id="home">Stuff</div>
<div id="services">Stuff</div>
<div id="projects">Stuff</div>
<div id="ourTeam">Stuff</div>
<div id="contacts">Stuff</div>

Help me out...

Akhin Abraham
  • 74
  • 10

2 Answers2

0

You need to animate the Html, body Try like this hope it works!

HTML link:

<a href="#yourId" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML anchor:

  <div id="yourId">My content here</div>
Aman
  • 1,502
  • 1
  • 8
  • 13
0

There's a CSS rule:

scroll-behavior: smooth;

Can be applied to a scrollable element

Shani Kehati
  • 427
  • 5
  • 10