Cómo hacer scroll suave o smooth scroll en javascript y css

Seguro que alguna vez te has preguntado como conseguir el efecto de scroll suave o también conocido como smooth scroll. Esto significa que cuando haces un enlace dentro de la propia página. Al pinchar no salte de golpe, sino que vaya a la ubicación correspondiente de manera suave.

Para este propósito tenemos dos opciones:

Sencilla

En mi página web dentro del curso básico de html (ver curso de ifelse.es) lo tengo programado de la siguiente manera y me funciona bastante bien. Para verlo en acción, accede a la página de mi curso de html básico y pincha en el menú de la izquierda en la opción de párrafos.

html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

Más compleja

Otra opción es utilizando la librería scroll-smooth para ello debes añadir los siguientes fragmentos antes de la última etique body de vuestro html.

<script src="<tu_carpeta>/smooth-scroll.min.js"></script> <script> var scroll = new SmoothScroll('a[href*="#"]', { speed: 500, speedAsDuration: true }); </script>

Esta librería tiene muchas opciones así que no estaría mal que le echases un ojo a la documentación.Te vuelvo a dejar el enlace porque muy probablemente no te habrás metido en el anterior, ahora es el momento scroll-smooth.

Espero que ahora el scroll de tu web funciones más fluido.