Cómo implementar el desplazamiento suave con JavaScript puro

En este nuevo tutorial, aprenderemos cómo implementar el desplazamiento suave en nuestras páginas web. Comenzaremos con un enfoque común de jQuery para crear esta funcionalidad. Después nos desharemos de jQuery y discutiremos dos soluciones con JavaScript puro.

Solo para darte una idea de lo que discutiremos durante este tutorial, consulta uno de los demos que estaremos construyendo:

¡Comencemos!

1. Comienza con el marcado HTML

Para fines de demostración, definiremos un encabezado rodeado por un contenedor y cuatro secciones. Dentro del encabezado, especificaremos un menú de navegación y un texto introductorio.

Cada sección tendrá un id cuyo valor coincide con el valor href de un enlace de menú. Esta asociación (a la que nos referimos como un identificador de fragmento) nos permitirá saltar a partes específicas de nuestra página.

Este es el HTML:

<div class="container">
  ...
  <header class="page-header">
    <nav>
      <ul>
        <li>
          <a href="#...">...</a>
        </li>
        <!-- more links -->
      </ul>
    </nav>
    <div class="header-text">...</div>
  </header>
</div>
<section class="section" id="">...</section>
<section class="section" id="">...</section>
<section class="section" id="">...</section>
<section class="section" id="">...</section>

2. Define los estilos

La parte del CSS será bastante sencilla, nada extraordinario.

Primero, usaremos CSS Grid para crear el diseño del encabezado de la página. El menú cubrirá un cuarto del ancho disponible, mientras que el texto cubrirá los tres cuartos restantes (la parte responsiva no es realmente importante aquí):

.page-header {
  display: grid;
  grid-column-gap: 30px;
  grid-template-columns: 1fr 3fr;
  padding: 40px 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin-bottom: 150px;
}

.header-text {
  font-weight: bold;
}

A continuación, aplicaremos algunos estilos a las secciones. Lo más importante es que nos aseguraremos de que tengan la altura suficiente, para que haya un desplazamiento adecuado dentro de la página para el efecto:

/*CUSTOM VARIABLES HERE*/

.section {
  padding: 150px 0;
}

.section:nth-of-type(1),
.section:nth-of-type(3) {
  background: var(--beige);
}

.section-text {
  margin: 50px 0;
  max-width: 800px;
}

.section-btn {
  display: inline-block;
  color: var(--beige);
  background: var(--black);
  min-width: 200px;
  height: 50px;
  padding: 9px 40px;
  text-align: center;
}

¡Eso es todo lo que necesitamos hasta ahora! Si ahora hacemos clic en un enlace específico, saltaremos inmediatamente a la sección correspondiente de la página.

Consulta nuestro demo inicial:

Cosas básicas de HTML, ¿cierto? Ahora vayamos un paso más adelante y aprendamos cómo navegar a las secciones con suavidad.

3. Desplazamiento suave con jQuery

Comenzaremos con el enfoque popular de jQuery. Para crear un desplazamiento suave con jQuery, aprovecharemos su método animate().

Cada vez que hagamos clic en un enlace de navegación, llevaremos a cabo las siguientes tareas:

1. Cancelaremos su comportamiento predeterminado para saltar a la sección correspondiente.
2. Obtendremos el valor de su atributo href.
3. Navegaremos con suavidad a la sección asociada animando la propiedad scrollTop. Toma en cuenta que el método animate() nos permite ajustar la velocidad de la animación. En nuestro caso, la animación durará 800 ms.

Este es el código en jQuery:

$(".page-header ul a").on("click", function (e) {
  // 1
  e.preventDefault();
  // 2
  const href = $(this).attr("href");
  // 3
  $("html, body").animate({ scrollTop: $(href).offset().top }, 800);
});

Y el demo relacionado:

4. Desplazamiento suave con JavaScript puro

En este punto, desecharemos jQuery y nos concentraremos en una solución de JavaScript nativa. Afortunadamente, es mucho más fácil de lo que podrías esperar.

Como veremos en una sección posterior, aunque la compatibilidad con el navegador no es ideal, hay cosas que podemos hacer para superar esta limitación.

Usando el método scroll()

Primero usaremos el método scroll(). La lógica de este enfoque es similar a la implementación anterior con jQuery.

El truco aquí es que, en el interior de este método, determinaremos el comportamiento del desplazamiento a través de la propiedad de configuración behavior. Los valores posibles son auto (predeterminado) y smooth. Tan pronto como establezcamos su valor en smooth, la magia ocurrirá y podremos navegar a la sección destino con suavidad.

Vale la pena mencionar que, al momento de escribir este artículo, no hay ninguna opción speed definida en la especificación para manipular la velocidad de la animación. Si eso no se ajusta a tus necesidades, es posible que tengas que extender la funcionalidad nativa escribiendo código personalizado.

Este es el código necesario:

const links = document.querySelectorAll(".page-header ul a");

for (const link of links) {
  link.addEventListener("click", clickHandler);
}

function clickHandler(e) {
  e.preventDefault();
  const href = this.getAttribute("href");
  const offsetTop = document.querySelector(href).offsetTop;

  scroll({
    top: offsetTop,
    behavior: "smooth"
  });
}

Consejo: en lugar del método scroll(), igualmente podríamos haber utilizado los métodos scrollTo() y scrollBy(). El efecto debería verse igual.

Este es el demo asociado:

Usando el método scrollIntoView()

Más allá de los métodos de desplazamiento antes mencionados, que se vinculan al objeto window, también está el método scrollIntoView() que se aplica a los elementos DOM. Este también puede aceptar la propiedad behavior con el valor establecido en smooth.

Este es el código necesario para esta implementación:

const links = document.querySelectorAll(".page-header ul a");

for (const link of links) {
  link.addEventListener("click", clickHandler);
}

function clickHandler(e) {
  e.preventDefault();
  const href = this.getAttribute("href");

  document.querySelector(href).scrollIntoView({
    behavior: "smooth"
  });
}

El demo relacionado:

¿Polyfills por favor?

El desplazamiento suave nativo es excelente, pero al igual que con muchos otros productos CSS nuevos, carece de una compatibilidad amplia. Si la compatibilidad con el navegador es importante para ti, puedes echar un vistazo al polyfill Smooth Scroll desarrollado por Dustan Kasten.

Para incluirlo en tus proyectos, obtenlo de un CDN y luego insértalo como una etiqueta script antes de tu código JavaScript.

Este es uno de nuestros demos de JavaScript mencionados anteriormente con el polyfill integrado:

Por ejemplo, con este polyfill la animación en navegadores como Microsoft Edge 18 y dispositivos como iPad Mini 4 debería funcionar como se espera.

Conclusión

¡Eso es todo, amigos! Hoy cubrimos un consejo de JavaScript que nos ayuda a lograr un desplazamiento suave sin el uso de ninguna biblioteca externa.

Espero que este ejercicio te haya resultado útil y que haya aumentado un poco tus conocimientos de JavaScript. Si alguna vez has construido algo similar en el pasado, ¡por favor compártelo con nosotros en los comentarios a continuación!

Desafío: antes de concluir, ¡tengo un pequeño desafío para ti! Tu trabajo es extender uno de nuestros demos de JavaScript incluyendo un botón "volver al principio". La funcionalidad final debería trabajar como este demo. ¿Aceptas el desafío? Si es así, ¡me gustaría ver tu solución en los comentarios a continuación!

Como siempre, ¡muchas gracias por leer!