Estoy tratando de hacer que el botón Volver a la parte superior haga clic para que se desplace sin problemas, pero estoy atascado. En este momento, este código funciona, pero no es un desplazamiento suave hacia la parte superior de la página. ¿Alguien puede ayudarme en esto? ?
<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide"> <span>⌃</span> </a> <style> .back-to-top { position: fixed; bottom: 20px; right: 25px; color: #999; background-color: #243066; z-index: 60000; } .back-to-top span{ height: 47px; } .hide { display: none!important; } .back-to-top:hover { box-shadow: 1px 1px 25px #9e9e9e; } </style> <script> (function() { function trackScroll() { var scrolled = window.pageYOffset; var coords = 300; if (scrolled > coords) { goTopBtn.classList.remove('hide'); } if (scrolled < coords) { goTopBtn.classList.add('hide'); } } function backToTop() { if (window.pageYOffset > 0) { window.scrollBy(0, -80); setTimeout(backToTop, 0); } } var goTopBtn = document.querySelector('.back-to-top'); window.addEventListener('scroll', trackScroll); goTopBtn.addEventListener('click', backToTop); })(); </script>Los navegadores modernos (todos menos IE) admiten un método scrollTo en el objeto de la ventana al que puede pasar un comportamiento de desplazamiento suave:
window.scrollTo({ top: 0, left: 0, behavior: 'smooth'}); También hay variaciones de esto, como element.scrollIntoView()
Puedes usar eso
document.getElementById('id').scrollIntoView({ behavior: 'smooth' });document .getElementById("id") .scrollIntoView({ block: "start", behavior: "smooth" });