En ciertas situaciones, al pulsar enlaces que llevan a un ancla (anchor) de una zona del documento, deseamos que el scroll se realice suavemente, en lugar de moverse directa e instantáneamente, que es el comportamiento por defecto del navegador.
Propiedad scroll-behavior
La propiedad scroll-behavior nos permite activar un desplazamiento suave (smooth scroll) al pulsar en un enlace de anclas <a>. Como hemos dicho, por defecto, al pulsar sobre estas anclas, nos desplazamos directa e instantáneamente a nuestro objetivo.
| Propiedad | Valores | Descripción |
|---|---|---|
scroll-behavior | auto | smooth | Aplicado sobre <html>, suaviza ciertos desplazamientos de scroll. |
Por defecto, la propiedad indicada es auto. Sin embargo, estableciendo el valor smooth a esta propiedad en el elemento <html>, podemos suavizar este comportamiento, de modo que se realiza de forma progresiva, muy suave:
html {
scroll-behavior: smooth;
}
Ejemplo
Hagamos el siguiente ejemplo. Consideremos una página que tiene 3 secciones (slide). Cada una ocupa la parte visible del navegador. El usuario puede desplazarse entre ellas simplemente haciendo scroll de ratón, o pulsando en los enlaces ancla, que se encuentran dentro del elemento <nav> (ubicados en la parte superior derecha). Estos enlaces llevan a los id definidos posteriormente.
En este ejemplo, sin CSS, la propiedad scroll-behavior está definida a auto, por lo que el comportamiento del navegador suele ser acceder directamente a la sección, de forma instantánea:
<nav>
<a href="#slide-1">Slide 1</a> ·
<a href="#slide-2">Slide 2</a> ·
<a href="#slide-3">Slide 3</a>
</nav>
<div class="container">
<div class="slide" id="slide-1">
<h1>Slide 1</h1>
</div>
<div class="slide" id="slide-2">
<h1>Slide 2</h1>
</div>
<div class="slide" id="slide-3">
<h1>Slide 3</h1>
</div>
</div>
html {
/* scroll-behavior: smooth; */
}
body, h1 {
margin: 0; /* Reset margins */
}
nav {
position: fixed;
top: 5px;
right: 5px;
background: white;
padding: 5px 10px;
}
.container {
height: 100vh;
}
.slide {
height: 100%;
background: var(--color, #aaa);
}
.slide:nth-child(2) { --color: steelblue; }
.slide:nth-child(3) { --color: tomato; }
Si descomentamos la parte comentada de CSS, del elemento <html>, aplicaremos el suavizado en desplazamiento, por lo que al pulsar sobre los enlaces ancla, observaremos que el desplazamiento entre secciones se hace de forma suave.
