El desplazamiento suave es una función moderna de microanimación que mejora la experiencia del usuario al permitir una navegación sencilla entre las secciones de una página. En lugar de saltar a las secciones instantáneamente, el desplazamiento suave crea una transición fluida y atractiva. Es una manera increíble de mantener a los usuarios interesados ​​sin abrumarlos con saltos abruptos.

En este artículo, exploraremos dos formas de implementar un desplazamiento suave:

• Usando CSS
• Usando JavaScript

Primero profundicemos en el uso de CSS para un desplazamiento fluido.

¿Por qué CSS para un desplazamiento suave?

CSS es el método más simple y preferido para lograr un desplazamiento fluido. Es eficiente para el rendimiento de la página ya que no se carga JavaScript adicional, lo que la hace más rápida y liviana. Sigamos adelante e implementemos esto en nuestro proyecto.

Paso 1: Crear la barra de navegación

Primero, creemos una barra de navegación simple que contenga nuestros enlaces de navegación. Estos enlaces llevarán a los usuarios a secciones específicas de la página.

Asegúrese de que los enlaces de navegación sean etiquetas de anclaje, ya que nos permiten saltar fácilmente a secciones específicas de la página.

Paso 2: Crear secciones
Ahora que tenemos nuestros enlaces de navegación, creemos las secciones correspondientes.

Hemos creado secciones para cada enlace de navegación.

Paso 3: Agregar contenido desplazable
Para que funcione el desplazamiento fluido, su página necesita suficiente contenido para desplazarse. Agreguemos texto ficticio para que la página sea desplazable.

Finalmente tenemos suficiente contenido para que nuestra página sea desplazable.

Paso 4: Vincular la navegación a las secciones
Usaremos el atributo href de la etiqueta de anclaje para hacer referencia a las secciones a las que queremos desplazarnos. Simplemente agregue un # seguido del ID de la sección correspondiente.

Entonces, lo que básicamente estamos haciendo en la imagen de arriba es usar el atributo href para hacer referencia a la sección a la que queremos que vayan nuestros enlaces de navegación.

Paso 5: Asigne el identificador(id) apropiado a la sección apropiada

Entonces, lo que hemos hecho ahora es simplemente asignar cada enlace a su sección apropiada con el atributo href y los ID. Por lo tanto, el enlace de navegación con un href de #sección-uno coincidirá con una sección de id sección-uno

Ahora, cuando hacemos clic en el enlace de navegación, somos llevados a la sección.
Pero hay algo que notamos, no es fluido, la página salta a la sección que no es una gran experiencia.

Paso 6: Agregar desplazamiento suave con CSS
Para permitir un desplazamiento fluido, agregue una única propiedad CSS al elemento html.

Cuando agregamos la propiedad de comportamiento de desplazamiento a nuestro html, podemos presenciar el efecto de desplazamiento suave cuando se hace clic en nuestro enlace de navegación.

Cómo funciona

En esencia, el atributo href en la etiqueta de anclaje se usa tradicionalmente para navegar a páginas o URL externas. Sin embargo, cuando se combina con un # seguido de un ID de sección, la etiqueta de anclaje "busca" dentro de la página actual y se desplaza a la sección correspondiente. Al agregar el comportamiento de desplazamiento: suave; Propiedad CSS, creamos una transición fluida entre secciones, mejorando la experiencia general del usuario.

La otra forma en que podemos lograr un desplazamiento fluido es usar JAVASCRIPT para manejarlo.
Esto también lo podemos lograr en tan solo unos pocos pasos:

NB: Cada sección aún tendría la identificación asignada como antes.

Paso 1: Crear una función scrollIntoView

Podemos crear una función en javascript que usaría el método scrollIntoView para lograr el mismo resultado. Así:

Paso 2: Insertar función cuando se hace clic en el enlace

incorporaremos la función scrollIntoView dentro del detector de eventos adjunto a cada enlace de navegación. De esta manera, cuando se hace clic en un enlace, la página se desplaza suavemente a la sección a la que se hace referencia.

Esto también se puede refactorizar según el marco que esté utilizando para el desarrollo.

Estas son dos formas sencillas en las que podemos lograr un desplazamiento fluido al crear páginas web intuitivas.

Deja un comentario si tienes alguna pregunta o comentario.