He codificado un desplazamiento suave al botón superior JS que se muestra aquí:

 mybutton = document.getElementById("btnTop"); // When the user scrolls down 20px from the top of the document, show the button. // This can be modified! window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } // When the user clicks on the button, scroll to the top of the document function topFunction() { // document.body.scrollTop = 0; // For Safari // document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera window.scrollTo({ top: 0, behavior: 'smooth' }); }

con el resto del código siendo CSS para imágenes y una llamada HTML y funcionó bien hasta que tuve que usar un getBoundingClientRect para obtener el DOM para detectar el estado activo de la sección actual en la página. Código mostrado aquí

 window.onscroll = function() { document.querySelectorAll("section").forEach(function(active) { let activeLink = navBar.querySelector(`[data-nav=${active.id}]`); if(active.getBoundingClientRect().top >= -400 && active.getBoundingClientRect().top <= 150){ active.classList.add("your-active-class"); activeLink.classList.add("active-link"); } else{ active.classList.remove("your-active-class"); activeLink.classList.remove("active-link"); } }); }

y desde entonces mi botón desapareció, diría que tiene algo que ver con la función window.onscroll. ¿Cómo soluciono esto manteniendo ambos códigos?