Cómo implementar el desplazamiento suave en JavaScript: una guía para desarrolladores web

Haga que sus enlaces a la misma página sean un poco más agradables de usar con este efecto nativo de desplazamiento suave.

El desplazamiento suave es una técnica utilizada en el desarrollo web para crear una experiencia de desplazamiento fluido para los usuarios. Mejora la navegación dentro de una página web animando el movimiento de desplazamiento en lugar del salto abrupto predeterminado.

Esta guía completa para desarrolladores web le ayudará a implementar un desplazamiento fluido utilizando JavaScript.

El desplazamiento suave ocurre cuando una página web se desplaza suavemente hasta la sección deseada, en lugar de saltar allí instantáneamente. Esto hace que la experiencia de desplazamiento sea más agradable y fluida para el usuario.

El desplazamiento suave puede mejorar la experiencia del usuario de una página web de varias maneras:

Para implementar un desplazamiento suave, puede modificar el comportamiento de desplazamiento predeterminado utilizando JavaScript.

Primero, cree los elementos de marcado necesarios para las diferentes ventanas gráficas y la navegación para desplazarse entre ellas.

Este HTML consta de una barra de navegación que contiene tres etiquetas de anclaje. El atributo href de cada ancla especifica el identificador único de la sección de destino (por ejemplo, sección1, sección2, sección3). Esto garantiza que cada enlace en el que haga clic navegue hasta el elemento de destino correspondiente.

A continuación, aplique algo de CSS para que la página sea visiblemente atractiva y organizada. Agregue lo siguiente aestilo.css:

Esto representará los enlaces como una fila de botones y cada sección como un elemento de altura completa. Pero observe cómo al hacer clic en un enlace el navegador salta instantáneamente a la sección correspondiente, sin animación.

Además, para agregar una animación suave al hacer clic en una etiqueta de anclaje, use el método scrollIntoView(). El método scrollIntoView() es un método JavaScript integrado de la clase Element que le permite desplazar un elemento al área visible de la ventana del navegador.

Cuando llama a este método, el navegador ajusta la posición de desplazamiento del contenedor del elemento (como la ventana o un contenedor desplazable) para que el elemento sea visible.

Añade tu código JavaScript alscript.js archivo. Comience escuchando hasta que se active el evento DOMContentLoaded antes de hacer cualquier otra cosa. Esto garantiza que la devolución de llamada solo se ejecute cuando el DOM esté completamente cargado y listo para manipularse.

A continuación, defina elhacerEnlacesSmooth() función. Comience seleccionando las etiquetas de anclaje en la navegación, ya que querrá modificar su comportamiento. Luego, repita cada enlace y agregue un detector de eventos para su evento de clic.

Finalmente, define ladesplazamiento suave() función que toma un objeto de escucha de eventos. Llame a preventDefault() para asegurarse de que el navegador no realice su acción predeterminada cuando hace clic en el enlace. El código que sigue lo reemplazará.

Tome el valor href de la etiqueta de anclaje actual y guárdelo en una variable. Ese valor debe ser el ID de la sección de destino, con el prefijo "#", así que úselo para seleccionar el elemento de la sección medianteselector de consulta() . Si el targetertElement está presente, ejecute sudesplácese a la vistamétodo y pasar el comportamiento "suave" en un parámetro de objeto para completar el efecto.

Con eso, su página web terminada se desplazará suavemente a cada sección cuando haga clic en un enlace:

Para mejorar aún más la experiencia de desplazamiento fluido, puedes ajustar ciertos aspectos.

Puede ajustar la posición vertical del desplazamiento usando elbloquear propiedad del argumento de configuración. Utilice valores como "inicio", "centro" o "fin" para identificar la parte del elemento de destino a la que desplazarse:

Aplique efectos de suavizado a la animación de desplazamiento para crear una transición más natural y visualmente atractiva. Las funciones de suavizado, como la entrada y salida fáciles o las curvas cúbicas-bezier personalizadas, pueden controlar la aceleración y desaceleración del movimiento de desplazamiento. Puede utilizar una función de sincronización personalizada con la propiedad CSS de comportamiento de desplazamiento o una biblioteca de JavaScript como "smooth-scroll" para lograr el mismo resultado.

Asegúrese de que su implementación de desplazamiento fluido funcione de manera consistente en diferentes navegadores. Pruebe y solucione cualquier peculiaridad o inconsistencia específica del navegador que pueda surgir.

Puede utilizar un sitio web como Can I Use para probar la compatibilidad del navegador durante la compilación. Considere utilizar una biblioteca de JavaScript o polyfill para garantizar la compatibilidad entre navegadores y brindar una experiencia perfecta para todos los usuarios.

El desplazamiento suave agrega un toque de elegancia y mejora la experiencia del usuario al crear un efecto de desplazamiento fluido y visualmente agradable. Siguiendo los pasos descritos en esta guía, los desarrolladores web pueden implementar un desplazamiento fluido utilizando JavaScript.

Ajustar el comportamiento de desplazamiento, agregar efectos de facilitación y garantizar la compatibilidad entre navegadores mejorará aún más la experiencia de desplazamiento fluido, haciendo que sus páginas web sean más atractivas y agradables de navegar.