Recientemente estudiamos cómo crear anclas o marcadores en HTML para navegar por una página web de manera más eficiente. Sin embargo, una vez que clicamos en estos enlaces, la transición por defecto es seca y sin ningún tipo de animación, lo que puede resultar en una experiencia de usuario poco atractiva. Afortunadamente, con la propiedad CSS scroll-behavior, podemos transformar estas transiciones y hacer que el desplazamiento entre marcadores sea suave y animado, sin la necesidad de recurrir a JavaScript, Jquery o librerías externas.
1. CSS scroll-behavior: desplazamiento suave o animado entre marcadores
En esencia, la propiedad scroll-behavior de CSS nos permite agregar un efecto de scroll suave (smooth scroll) a nuestra página web para mejorar la experiencia del usuario, haciendo que la navegación sea más atractiva y fluida. De esta forma, al pulsar enlaces que llevan a un ancla (anchor) o marcador de una zona del documento HTML, en lugar de moverse directa e instantáneamente, que es el comportamiento por defecto del navegador, se moverá con una pequeña animación suave.
2. Propiedad CSS scroll-behavior: sintaxis y valores
La propiedad scroll-behavior se aplica típicamente al elemento html para controlar el comportamiento de desplazamiento en toda la página. Veamos su sintaxis.
Sintaxis:
html{
scroll-behavior: auto | smooth;
}
- auto: Este es el valor predeterminado. Indica que el desplazamiento será instantáneo, similar al comportamiento estándar del navegador.
- smooth: Este valor activa el desplazamiento suave, lo que significa que el movimiento entre los diferentes elementos de la página será gradual y animado.
3. Compatibilidad de scroll-behavior con navegadores
La propiedad scroll-behavior es compatible con la mayoría de los navegadores modernos, pero no es compatible con versiones anteriores de Internet Explorer. Puedes ver la compatibilidad actual según Can I Use.
4. Diferencias entre scroll-behavior y scroll-snap
La propiedad scroll-behavior y la funcionalidad de scroll-snap son herramientas de CSS para mejorar la experiencia de desplazamiento en las páginas web. Aunque ambas están diseñadas para mejorar la navegación, tienen propósitos y funcionalidades diferentes. Por un lado, scroll-behavior se centra en el comportamiento general del desplazamiento entre elementos en la ventana del navegador, mientras que, por otro lado, scroll-snap se utiliza para controlar el desplazamiento dentro de contenedores específicos, permitiendo un desplazamiento centrado en puntos de anclaje definidos.
Ambas características son complementarias y pueden mejorar la experiencia de navegación en una página web al proporcionar un desplazamiento más suave, fluido y controlado. Visita el artículo Scroll snap en CSS: Controla el desplazamiento de tu web para más información.
5. Ejemplos prácticos de scroll-behavior
Veamos algunos ejemplos prácticos que puedes necesitar en la creación de tus páginas web para conseguir efectos que mejoren la usabilidad.
5.1. Menú de navegación con enlaces a secciones con scroll suave
La propiedad scroll-behavior es muy utilizada en páginas de aterrizaje (landing pages) compuestas por un menú principal que enlaza a diversos marcadores o anclas dispuestos en distintos contenedores.
HTML:
<nav>
<ul>
<li><a href="#section1">Sección 1</a></li>
<li><a href="#section2">Sección 2</a></li>
<li><a href="#section3">Sección 3</a></li>
<li><a href="#section4">Sección 4</a></li>
</ul>
</nav>
<section id="section1">Sección 1</section>
<section id="section2">Sección 2</section>
<section id="section3">Sección 3</section>
<section id="section4">Sección 4</section>
CSS:
html{
scroll-behavior: smooth;
}
Ejemplo en CodePen:
5.2. Botón para volver a la parte superior de la página con scroll suave
Este ejemplo muestra un botón al final de la página que, al hacer clic en él, desplaza la página suavemente hasta la parte superior. Es una forma de proporcionar a los usuarios una manera rápida de volver al inicio de la página. De las misma forma, se podría hacer el típico botón fijo lateral con una flecha hacia arriba que nos permita volver hacia arriba en cualquier momento.
HTML:
<div class="container" id="scrollBtn"> <p>Haz scroll hasta el final de la página y presiona el botón "Ir arriba"</p> </div> <a href="#scrollBtn">↑ Ir arriba</a>
CSS:
html{
scroll-behavior: smooth;
}
Ejemplo en CodePen:
5.3. Aside de contenidos con scroll suave
Este ejemplo muestra un diseño con un aside de contenidos a la izquierda y el contenido principal a la derecha. Los enlaces en el aside te llevan a las diferentes secciones del contenido principal, y el scroll es suave gracias a la propiedad scroll-behavior de CSS.
HTML:
<div class="container">
<aside>
<ul>
<li><a href="#section1">Sección 1</a></li>
<li><a href="#section2">Sección 2</a></li>
<li><a href="#section3">Sección 3</a></li>
<li><a href="#section4">Sección 4</a></li>
</ul>
</aside>
<main>
<section id="section1">
<h2>Sección 1</h2>
<p>...</p>
</section>
<section id="section2">
<h2>Sección 2</h2>
<p>...</p>
</section>
<section id="section3">
<h2>Sección 3</h2>
<p>...</p>
</section>
<section id="section4">
<h2>Sección 4</h2>
<p>...</p>
</section>
</main>
</div>
CSS:
html{
scroll-behavior: smooth;
}
Ejemplo en CodePen:
¡Esperamos que este artículo te haya sido útil para mejorar la experiencia de navegación en tu sitio web! Si quieres recibir más consejos y tutoriales sobre diseño web, no dudes en suscribirte a nuestra lista de correo.