0Pricing
CSS Academy · Lección

scroll-behavior: smooth

Active el desplazamiento suave para enlaces de anclaje y desplazamientos programáticos mediante scroll-behavior.

scroll-behavior: smooth es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué es scroll-behavior?

scroll-behavior controla si el desplazamiento activado por la navegación (enlaces de anclaje, JavaScript scrollTo()) debe animarse suavemente o saltar de inmediato.

scroll-behavior: smooth

Establecer scroll-behavior: smooth en el elemento html o body hace que toda la navegación de la página mediante enlaces de anclaje se anime suavemente:

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

Instantáneo frente a suave

Valores:

  • auto (valor predeterminado): salto instantáneo
  • smooth: desplazamiento animado hasta el destino

Navegación mediante enlaces de anclaje

Con el desplazamiento suave activado, al hacer clic en un enlace como <a href="#contact"> se desplaza suavemente hasta el elemento con id="contact" en lugar de saltar de inmediato.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

scrollTo() de JavaScript con desplazamiento suave

Pase behavior: "smooth" a los métodos de desplazamiento de JavaScript para obtener un desplazamiento animado:

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

Interacción con prefers-reduced-motion

El desplazamiento suave puede provocar mareos. Desactívelo siempre para los usuarios que prefieran reducir el movimiento:

  <p>Respects <code>prefers-reduced-motion</code>.</p>

scroll-behavior en contenedores

Aplíquelo a cualquier contenedor desplazable, no solo a la página:

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

Limitaciones

CSS scroll-behavior no permite controlar la duración ni la función de aceleración del desplazamiento. Para controlar con precisión la animación, use la Web Animations API de JavaScript o bibliotecas como GSAP con sus complementos de desplazamiento.

scroll-padding-top para encabezados fijos

Cuando un encabezado fijo se superpone a los destinos de los enlaces de anclaje, scroll-padding-top añade un desplazamiento para que el destino no quede oculto detrás del encabezado:

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin frente a scroll-padding

scroll-margin añade el desplazamiento directamente al elemento de destino; scroll-padding lo añade al contenedor de desplazamiento. Ambos resuelven el problema de los encabezados fijos:

  <div class="section">Section content</div>

Nota sobre accesibilidad

El desplazamiento suave es una mejora de la experiencia de usuario. Asegúrese siempre de que la navegación mediante anclajes funcione incluso sin él. No dependa del comportamiento de desplazamiento suave para la funcionalidad, sino únicamente para mejorar la presentación visual.

Comprobación rápida

¿Cómo se asegura de que la animación de desplazamiento suave esté desactivada para los usuarios con sensibilidad vestibular al movimiento?

Resumen

scroll-behavior: smooth en html habilita el desplazamiento animado suave para los enlaces de anclaje y los métodos de desplazamiento de JavaScript. Use scroll-padding-top para separar los destinos de desplazamiento de los encabezados fijos que podrían cubrirlos. Desactive siempre el desplazamiento suave dentro de una consulta de medios prefers-reduced-motion: reduce por motivos de accesibilidad.

Preguntas frecuentes

¿La lección «scroll-behavior: smooth» es gratis?

Sí — el texto completo de «scroll-behavior: smooth» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «scroll-behavior: smooth»?

Active el desplazamiento suave para enlaces de anclaje y desplazamientos programáticos mediante scroll-behavior. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «scroll-behavior: smooth»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. overflow: hidden, scroll, auto y clip
  2. scroll-behavior: smooth
  3. scroll-snap-type y scroll-snap-align
  4. Estilos de la barra de desplazamiento con ::-webkit-scrollbar
← Volver a CSS Academy