¿Qué es scroll-behavior: smooth?

La propiedad scroll-behavior permite definir cómo se desplaza el contenido de un elemento cuando se cambia su posición de scroll, ya sea mediante anclajes (#id), element.scrollIntoView() o manipulación del scrollTop. El valor smooth genera una animación gradual que mejora la experiencia del usuario, evitando saltos bruscos.

Implementación básica

Aplicar el efecto a toda la página es tan sencillo como añadir la regla al elemento html o body:

html {
  scroll-behavior: smooth;
}

Con esta única línea, cualquier enlace interno (<a href="#seccion">) se desplazará suavemente hasta el destino.

Ejemplos reales

1️⃣ Scroll suave en anclajes internos

<nav class="fixed-top bg-light py-2">
  <a href="#inicio" class="mx-2">Inicio</a>
  <a href="#servicios" class="mx-2">Servicios</a>
  <a href="#contacto" class="mx-2">Contacto</a>
</nav>
<section id="inicio" class="pt-5">…</section>
<section id="servicios" class="pt-5">…</section>
<section id="contacto" class="pt-5">…</section>
<style>
  html { scroll-behavior: smooth; }
</style>

2️⃣ Scroll con offset (ej. barra fija)

Cuando una barra de navegación fija oculta parte del contenido, combina scroll-behavior con scroll-margin-top en los destinos:

section {
  scroll-margin-top: 80px; /* altura de la barra fija */
}

3️⃣ Desactivar en dispositivos de bajo rendimiento

Utiliza una media query para aplicar el efecto solo en pantallas con suficiente capacidad:

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

Comparativa: CSS vs. JavaScript

Compatibilidad y fallback

La propiedad está soportada en todos los navegadores modernos (Chrome 61+, Edge 79+, Firefox 36+, Safari 15+, Opera 48+). Para navegadores legacy, se recomienda un fallback con JavaScript:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

Buenas prácticas y optimización

• Respetar prefers-reduced-motion: desactiva el scroll suave cuando el usuario haya indicado que prefiere menos animaciones.
• Limitar el alcance: aplica la regla solo a contenedores que realmente lo necesiten (p. ej., .scrollable) para evitar efectos inesperados en componentes como modales.
• Evitar anidaciones excesivas: un scroll suave dentro de otro elemento con scroll puede generar conflictos de rendimiento.
• Test de rendimiento: en dispositivos móviles de gama baja, verifica que la animación no cause jitter usando herramientas de Chrome DevTools (Performance panel).

Resolución de problemas comunes

Conclusión

La propiedad scroll-behavior: smooth es una herramienta poderosa y ligera para mejorar la usabilidad de sitios web con navegación basada en anclajes. Cuando se combina con scroll-margin-top, prefers-reduced-motion y fallback inteligente, brinda una experiencia fluida sin comprometer rendimiento ni accesibilidad.