How to scroll smoothly to a specific section and not JUMP using JAVASCRIPT?

Question

I want to make my navbar so when one of the option in the navbar is clicked the page would scroll smoothly and NOT JUMP IMMEDIATELY to that specific section in the page, for example when i click contact on my navbar the page would scroll down to the contact section in the same page.

How to make something like that USING JAVASCRIPT and not CSS, can anyone help me ?

Here's my HTML code for the nav bar:

<ul id="navbar__list">
    <li><a class="menu__link" href="#section1">Section 1</a></li>
    <li><a class="menu__link" href="#section2">Section 2</a></li>
    <li><a class="menu__link" href="#section3">Section 3</a></li>
    <li><a class="menu__link" href="#section4">Section 4</a></li>
  
  </ul>
</nav>

and here's my incomplete Javascript code that i can't figure out. Confused what to use:

document.querySelectorAll("li").addEventListener("click", scrollTo());

and here is one of the sections in HTML:

<section id="section1" data-nav="Section 1" class="your-active-class">
      <div class="landing__container">
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. </p>

        <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. </p>
      </div>
    </section>

can anyone help?

How to scroll smoothly to a specific section and not JUMP using JAVASCRIPT?

0 Answers0