Atributo CSS scroll-behavior

Definición y uso

La propiedad scroll-behavior especifica si se desplaza suavemente (con efecto de animación) la posición al hacer clic en un enlace dentro de una caja desplazable, en lugar de saltar directamente.

Ejemplo

Añadir efecto de desplazamiento suave al documento:

html {
  scroll-behavior: smooth;
}

Pruebe usted mismo

Sintaxis de CSS

scroll-behavior: auto|smooth|initial|inherit;

Valor del atributo

Valor Descripción
auto Valor predeterminado. Permite que los elementos dentro de la caja de desplazamiento se desplacen directamente entre ellos.
suave Permite que los elementos dentro de la caja de desplazamiento se desplacen suavemente entre ellos.
initial Establezca este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo de su elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: auto
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: Módulo de Vista CSSOM (versión de trabajo)
Sintaxis de JavaScript: object.style.scrollBehavior="smooth"

Compatibilidad del navegador

Los números en la tabla indican la primera versión de navegador que completamente admite esta propiedad.

Chrome IE / Edge Firefox Safari Opera
61.0 79.0 36.0 14.0 48.0