He codificado una barra de navegación usando JS, necesito agregar un desplazamiento suave activo cuando un usuario hace clic en una de las secciones escritas en JS puro (y no en el desplazamiento suave de CSS) Estaba pensando en algo con scrollIntoView o scrollTo pero cada vez que codifico hace que la barra de navegación desaparezca o no funcione en absoluto. Aquí está mi código de barra de navegación. Cualquier ayuda es apreciada.

 function navBar() { const section = document.getElementsByTagName('section'); for (let i = 0; i < section.length; i++) { let navBarUL = document.getElementById("navBarULID"); let link = `<a href='#' onclick="console.log(${i})" id='link_no${i+1}'> Section ${i+1} </a>`; let newLI = document.createElement("li") newLI.innerHTML = link navBarUL.appendChild(newLI) let j = i } for (let i = 0; i < section.length; i++) { document.getElementById( 'link_no' + (i + 1)).addEventListener('click', function(e) { e.preventDefault(); let allActiveLinks = document.getElementsByClassName('active-link'); for (let i = 0; i < allActiveLinks.length; i++) { const element = allActiveLinks[i]; element.classList.remove('active-link'); }

Aquí hay una muestra de HTML

 <ul id="navBarULID"></ul> </nav> </header> <main> <header class="main__hero"> <h1 id="p1">Landing Page </h1> </header> <section id="section1" class="your-active-class"> <div class="landing__container"> <h2 id="section1ID">Section 1</h2> <p>test.</p> </div> </section> <section id="section2" > <div class="landing__container"> <h2 id="section2ID">Section 2</h2> <p>test.</p> </div> </section> <section id="section3" > <div class="landing__container"> <h2 id="section3ID">Section 3</h2> <p>test.</p> </div> </section>