En este post (actualizado a diciembre de 2020) les quiero comentar sobre el uso del Smooth Scrolling para «recorrer» los links en una misma página o pantalla. En una versión utilizando JQuery y en otra utilizando puramente CSS.
▧ Saltó la liebre
Pensemos en un caso práctico: utilizamos un anchor (o ancla) interno entre un ítem y otro. Al hacer click, ¿qué sucede? El efecto es brusco e inmediato. ¡Como el salto de una liebre! Pero, al aplicar el Smooth Scrolling, este efecto se suaviza. Es más agradable visualmente y mejora la experiencia del usuario.
En la web de CSS-Tricks encontré este snippet en JQuery para aplicar el Smooth Scrolling o desplazamiento suave dentro de una misma página. Con él, evitamos ese «salto brusco».
Aquí abajo copio el CodePen. pueden mirar, testear, copiar y pegar:
▧ Un poco más allá
Como ya vieron en el ejemplo anterior, este efecto hasta hace un tiempo, podía lograrse sólo utilizando algo de JavaScript o jQuery. Pero actualmente, existe una propiedad específica de CSS llamada scroll-behavior: smooth;
Los valores para esta propiedad, por el momento, son dos:
scroll-behavior: auto;comportamiento tradicional: salto brusco.scroll-behavior: smooth;desplazamiento suave progresivo.
No existe (al menos al día de esta actualización) otro parámetro para customizar la velocidad de transición: este queda en manos del navegador. Sin embargo, la velocidad que viene por defecto es medianamente aceptable.
Por defecto, esta propiedad no es «heredable», por lo que hay que aplicarla al elemento contenedor del scroll.
El listado de los navegadores que soportan esta propiedad es amplio, y se puede consultar en caniuse.
En esta demo de CodePen que dejo a continuación, se puede ver su funcionamiento:
¡Pero hay más!
Este otro ejemplo, es mucho más completo, combina scroll:behavior con efecto toggle; todo hecho puramente en CSS: Toggle function & smooth scroll pure HTML & CSS.
Espero que te resulte útil para aplicar a tu código, así que, ¡a codear se ha dicho!
