Scroll suave (Smooth Scroll)

Suavizar efecto de scroll


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.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev