Mejora el Interaction to Next Paint eliminando el scrolling con JavaScript

Reemplaza el scrolling JavaScript por CSS hoy

Este blog tiene algo de historia. Hasta 2017, la única forma de añadir un comportamiento de desplazamiento suave y consistente era usar una biblioteca JavaScript. Y eso es exactamente lo que hacían muchos desarrolladores. Los Core Web Vitals aún no existían y todos usaban jQuery como su biblioteca JavaScript principal.

Ahora avancemos hasta el día de hoy. Existen alternativas mucho mejores, más rápidas y más fáciles al scrolling de anclas basado en JavaScript. Sin embargo, como consultor de Core Web Vitals, todavía los veo todos los días.

Última revisión por Arjen Karel en febrero de 2026

Por qué el scrolling basado en JavaScript es ‘malo’

El scrolling basado en JavaScript es malo por 2 razones: es complicado y es lento.

Complicado: El scrolling basado en JavaScript es innecesariamente complicado. Tienes que escribir y mantener código difícil de leer y aunque el método Window.scrollTo() ha hecho este código mucho más fácil, sigue siendo mucho más difícil de mantener que una sola línea de CSS.

Lento. JavaScript tiende a bloquear el hilo principal y siempre es más lento que su contraparte CSS. Dependiendo de cómo se implementó la función de scroll, puede bloquear el hilo principal durante bastante tiempo y causar un retraso importante en la métrica Interaction to Next Paint. Según el Web Almanac 2025, la mediana del Total Blocking Time en móvil se sitúa en 1.916 milisegundos. Cada función JavaScript innecesaria que compite por el hilo principal lo empeora.

Por qué el CSS Smooth Scrolling es ‘bueno’

Hablé sobre por qué el scrolling basado en JavaScript es malo. Lo contrario es cierto para el desplazamiento suave basado en CSS. Realmente es tan simple como añadir lo siguiente a tu hoja de estilos:

html{ scroll-behavior: smooth;}

Simple y efectivo

El one-liner CSS html { scroll-behavior: smooth; } es super simple de implementar y más eficiente que las soluciones basadas en JavaScript. Esta única línea de código habilita el desplazamiento suave para toda la página sin ninguna función JavaScript difícil de mantener. Si quieres ir más allá y diferir o eliminar JavaScript innecesario por completo, tu tiempo de procesamiento INP te lo agradecerá.

Mejor rendimiento

El desplazamiento suave basado en CSS es manejado nativamente por el navegador y en todos los casos superará a las implementaciones JavaScript. Esto es especialmente importante para optimizar la métrica Interaction to Next Paint (INP), ya que será menos carga para el hilo principal del navegador. Los manejadores de scroll JavaScript necesitan ejecutarse en el hilo principal, y cada milisegundo gastado allí es un milisegundo que retrasa la siguiente interacción del usuario. El comportamiento de scroll CSS se ejecuta completamente fuera del hilo principal. Si aún tienes JavaScript que necesita ejecutarse durante las interacciones, lee sobre cómo ceder el hilo principal.

El desplazamiento suave de anclas es solo el comienzo. CSS está asumiendo más responsabilidades de scroll que antes requerían JavaScript. Las animaciones impulsadas por scroll (Chrome 115+, Safari 26) te permiten vincular el progreso de la animación a la posición de scroll, reemplazando completamente los manejadores de scroll con requestAnimationFrame. Las animaciones activadas por scroll (Chrome 145) lanzan animaciones basadas en tiempo al cruzar un offset de scroll, reemplazando IntersectionObserver para efectos de aparición. Y las consultas de contenedor scroll-state (Chrome 133+) te permiten estilizar elementos según si están fijados, anclados o son desplazables, sin necesidad de JavaScript. La tendencia es clara: mueve la lógica de scroll de JavaScript a CSS siempre que puedas.

Compatibilidad de navegadores

El CSS smooth scrolling tiene un 95% de soporte global de navegadores según CanIUse. Ha sido baseline en todos los navegadores principales desde marzo de 2022. Los navegadores antiguos, donde el desplazamiento suave no está soportado, simplemente recurren al salto directo predeterminado al ancla.

Personalización fácil

CSS te permite personalizar fácilmente el comportamiento de scroll. Por ejemplo, la propiedad scroll-margin-top te permite establecer la distancia superior al elemento desplazado:

h1, h2, h3 {scroll-margin-top: 5rem;} 

O aún más fácil con la pseudo clase ‘target’

:target {scroll-margin-top: 5rem;} 

Respetar las preferencias de movimiento

Algunos usuarios experimentan mareo por las animaciones de scroll. Envolver tu desplazamiento suave en una media query prefers-reduced-motion asegura que esos usuarios obtengan saltos instantáneos en su lugar:

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

Esto aplica el desplazamiento suave solo para los usuarios que no han solicitado movimiento reducido. Los usuarios con trastornos vestibulares o sensibilidad al movimiento verán el scroll instantáneo predeterminado.

Ejemplo completo

Para ver este código en acción, simplemente haz clic en la Tabla de Contenidos en la parte superior de esta página. Notarás un bonito desplazamiento suave hasta el ancla clicada.

Aquí hay un ejemplo simplificado para que lo copies y reutilices

<html>

<head>
    <title>Smooth scroll to target</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        :target {
            scroll-margin-top: 5rem;
        }
        .largedivider {
            height: 1000px;
        }

    </style>

</head>

<body>
    <nav>
        <a href="#target">scroll to target</a>
    </nav>
    <div class="largedivider"> -- </div>
    <h2 id="target">scroll to me</h2>
    <div class="largedivider"> -- </div>
</body>

</html>