Los enlaces internos dentro de un mismo documento HTML son una solución muy práctica y habitual, especialmente en páginas de preguntas frecuentes o ecommerce monoproducto.
Son muy cómodos porque te permiten acceder de forma muy rápida y fácil a diferentes secciones cuyo contenido quizá no es suficiente para disponer de su propia página.
Además, en este tipo de estructuras de contenido también es habitual encontrar un botón flotante con la típica flechita para volver hacia arriba, la cual funciona con el mismo sistema: un enlace interno que apunta al id de un elemento de la misma página.
El problema es que el salto por defecto entre diferentes secciones suele ser bastante brusco, lo que puede hacer que la experiencia de usuario se vea afectada, especialmente en páginas grandes con bastante scroll. Es decir, el usuario no sabe muy bien a qué altura de la página está. Y para qué negarlo, esa transición no es ni agradable ni bonita, que todo suma.
Un ejemplo del comportamiento por defecto:
Para solucionarlo, tradicionalmente tirábamos de librerías de JavaScript, ya fuesen específicas o con jQuery, pero hoy en día disponemos de una propiedad específica de CSS: scroll-behavior: smooth; y el navegador se ocupará de todo.
html {
scroll-behavior: smooth;
/*Comenta la línea (o dale el valor 'auto' a scroll behavior )
para probar la diferencia con y sin scroll suavizado*/
}
Obviamente no tendremos parámetros para personalizar la velocidad de la transición, pero la transición por defecto es suficientemente útil para el 99% de los casos, en mi humilde opinión. Se vería algo así.
La propiedad scroll-behavior: soporte, compatibilidad y usos
Hay algunas cosillas que debes tener en cuenta. Por defecto no se hereda y se la tendrás que aplicar al elemento contenedor que tendrá el scroll. En el caso del viewport del navegador, deberás aplicárselo al elemento raíz, ya sea a través del elemento html o del pseudo-elemento :root.
El soporte en navegadores es bastante bueno y se puede usar en la mayoría de los más populares, exceptuando Safari (al menos en el momento de escribir este artículo).
Ejemplo práctico con scroll-behavior: slider vertical solo con CSS
¿Te acuerdas de este slider que hicimos solo con CSS anteriormente en este blog?
Pues con un par de retoques podemos hacer que la transición sea en vertical. Básicamente, lo que he hecho es que, los elementos <li> que antes los posicionaba de manera absoluta para poder apilarlos y mostrarlos y ocultarlo usando la opacidad, ahora los apilo como elementos de bloque (display:block) para mostrarlos en función del scroll.
Yo lo he hecho con una lista, pero esto se puede hacer con div, span, article, section... Vamos, con lo que semánticamente te venga mejor. Y te puede servir tanto para una presentación insertada dentro de una página como para organizar todo el contenido:
Los dos ejemplos de este post te los puedes descargar aquí para probarlos en tu propio equipo.
Y como guinda del pastel, también le podríamos aplicar las propiedades del CSS Scroll Snap module que hace poco nos explicó en este mismo blog José Manuel Alarcón, nuestro profe especialista en Front-End y creador de nuestro curso de HTML5 y CSS3 (y coautor del curso de Maquetación Responsive, entre muchos otros), así podremos mejorar también la experiencia durante el scroll normal del usuario.
Pero esta parte ya te la dejo a ti, que tampoco te lo voy a dar todo hecho, ¿no?. ¯\_(ツ)_/¯
Espero que te haya resultado útil, y si te queda alguna duda, tienes los comentarios a tu disposición para plantearla.
Fecha de publicación: