Como hacer efecto suave en el Scroll

efecto desplazamiento mouse css html

Si hacemos enlaces entre secciones de una pagina nos lleva de una manera muy brusca, sin que haya una transición que muestre el scroll (desplazamiento) hacia el destino, vamos a ver un efecto suave muy sencillo en CSS que nos soluciona la papeleta en la mayoría de los casos.

Transición suave scroll CSS

Vamos a personalizar en WordPress o en el archivo Style de nuestro tema o web y ponemos este pequeño código con la etiqueta html.

html{scroll-behavior: smooth;}

En el editor de wordpress tiene que quedar así

efecto scroll css wordpress
Desplazamiento  suave CSS

En algunas ocasiones si tienes algo que dependa de la etiqueta html puede que te provoque algún conflicto, yo de momento he tenido problemas con el efecto transición aplicado directamente en el HTML y te olvidas de JavaScript, frameworks y demás historias por el estilo.

¡Quizás te interesa esto!

Curso de edición de imágenes con Paint.Net | GRATIS

Sobre Marc Oliveras 185 artículos
Cuando no estoy atrapado en alguna red mirando videos de gatitos, escribo artículos que solucionan problemas.

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*