Haga que sus enlaces de 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 fluida para los usuarios. Mejora la navegación dentro de una página web al animar el movimiento de desplazamiento en lugar del salto abrupto predeterminado.

Esta completa guía para desarrolladores web lo ayudará a implementar un desplazamiento suave con JavaScript.

El desplazamiento suave es cuando una página web se desplaza suavemente a 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:

  • Mejora el atractivo visual al eliminar los saltos de desplazamiento abruptos y discordantes, agregando un toque de elegancia.
  • Fomenta la participación del usuario al proporcionar una experiencia de desplazamiento fluida y sin problemas. Esto, a su vez, motiva a los usuarios a explorar más el contenido.
    instagram viewer
  • Por último, el desplazamiento suave hace que la navegación sea más sencilla para los usuarios, especialmente cuando se trata de páginas web largas o cuando se mueve entre diferentes secciones.

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

Estructura HTML

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

html>
<htmllang="en">
<head>
 <metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="./style.css" />
<title>Smooth Scrolling Guide for Web Developerstitle>
head>


<body>
<nav>
<ul>
<li><ahref="#section1">Section 1a>li>
<li><ahref="#section2">Section 2a>li>
<li><ahref="#section3">Section 3a>li>
ul>
nav>


<sectionid="section1">
<h2>Section 1h2>
section>


<sectionid="section2">
<h2>Section 2h2>
section>


<sectionid="section3">
<h2>Section 3h2>
section>


<scriptsrc="./script.js">script>
body>
html>

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 asegura que cada enlace en el que haga clic navegue al elemento de destino correspondiente.

Estilo CSS

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "SegoeUI", Tahoma, Geneva, Verdana, sans-serif;
}


nav {
background: #fff;
box-shadow: 3px 3px 5pxrgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}


navul {
display: flex;
gap: 10px;
justify-content: center;
}


navulli {
list-style: none;
}


navullia {
border-radius: 5px;
border: 1.5pxsolid#909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

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

Implementación de JavaScript

En otro, para agregar una animación fluida al hacer clic en una etiqueta de anclaje, utilice el método scrollIntoView(). El método scrollIntoView() es un método incorporado de JavaScript 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.

Agregue su código JavaScript a la guión.js archivo. Comience escuchando el evento DOMContentLoaded para que se active antes de hacer cualquier otra cosa. Esto asegura que la devolución de llamada solo se ejecute cuando el DOM está completamente cargado y está listo para manipular.

document.addEventListener("DOMContentLoaded", makeLinksSmooth);

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

functionmakeLinksSmooth() { 
const navLinks = document.querySelectorAll("nav a"); 
 navLinks.forEach((link) => {
 link.addEventListener("click", smoothScroll);
 });
}

Finalmente, defina la Desplazamiento suave () función que toma un objeto detector de eventos. Llame a preventDefault() para asegurarse de que el navegador no realice su acción predeterminada cuando haga clic en el enlace. El siguiente código 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 utilícelo para seleccionar el elemento de la sección a través de selector de consulta(). Si targettElement está presente, ejecute su desplácese a la vista y pase el comportamiento "suave" en un parámetro de objeto para completar el efecto.

functionsmoothScroll(e) {
 e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) { 
 targetElement.scrollIntoView({ behavior: "smooth", });
 }
}

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

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

Puede ajustar la posición vertical del desplazamiento con el botón bloquear propiedad del argumento settings. Utilice valores como "inicio", "centro" o "final" para identificar la parte del elemento de destino a la que desplazarse:

targetElement.scrollIntoView({ behavior: "smooth", block: "end" });

Adición de efectos de relajación

Aplique efectos de aceleración a la animación de desplazamiento para crear una transición más natural y visualmente atractiva. Funciones de aceleración como entrada, salida o personalizadas curvas cúbicas-bezier puede controlar la aceleración y desaceleración del movimiento de desplazamiento. Puede usar una función de temporización personalizada con la propiedad CSS de comportamiento de desplazamiento o una biblioteca de JavaScript como "desplazamiento suave" para lograr el mismo resultado.

/* CSS to apply easing effect */
html {
scroll-behavior: smooth;
/* Custom cubic-bezier easing */
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}

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

Puedes usar un sitio web como Puedo usar para probar el soporte del navegador al construir. Considere usar 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 usando JavaScript.

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