如何使用 CSS 或 Javascript 为您的网站添加平滑滚动？

Question

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

Answer 1

There's a CSS rule:

scroll-behavior: smooth;

Can be applied to a scrollable element

Answer 2

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>