Camilo Villavicencio Garrido

Información creada o curada por mí

Scrollbehavior: smooth

October 12, 2019 — Camilo Villavicencio

Es una propiedad css que indica el comportamiento del scroll dentro de un archivo html.

Síntaxis

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

Valores

auto
Movimiento es automático. Valor por defecto.

smooth
Efecto animado entre elementos.

initial
Vuelve al comportamiento anterior a su determinación. Para efectos prácticos, equivale a auto.

inherit
Toma comportamiento de elemento en que se encuentre.

Uso

En el ejemplo lo pondré como atributo de una clase (algo) para aplicarla en un div(texto), pero obviamente puede usarse en cualquier otro elemento. Para que aplique a todo el contenido de la página, agregar a html y no olvidar usar <html> - </html.

CSS

.algo{ scroll-behavior: smooth; }

HTML


relleno
 relleno
  relleno
   relleno
    relleno
     relleno
    r elleno
   r  elleno
  r   elleno
 r    elleno
r     elleno
r    e lleno
r   e  lleno
r  e   lleno
r e    lleno
re     lleno
re    l leno
re   l  leno
re  l   leno
re l    leno
rel     leno
rel    l eno
rel   l  eno
rel  l   eno
rel l    eno
rell     eno
rell    e no
rell   e  no
rell  e   no
rell e    no
relle     no
relle    n o
relle   n  o
relle  n   o
relle n    o
rellen     o
rellen    o 
rellen   o
rellen  o
rellen o
relleno

Final de contenido de relleno, ver ejemplo en funcionamiento.

También puede agregarse dentro del propio div, sin necesidad de usar un archivo css o <style> al comienzo:

Tags: css