Desplazamiento suave hacia el ancla mediante JavaScript

El desplazamiento suave es una característica popular del diseño web que mejora la experiencia del usuario al permitir una navegación fluida entre las secciones de una página web. En lugar de saltos bruscos, el desplazamiento suave crea una transición fluida, lo que hace que las interacciones se sientan más naturales y visualmente atractivas.

Esta técnica es especialmente común en las páginas de destino, donde los enlaces de navegación suelen apuntar a diferentes secciones de la misma página. El desplazamiento suave ayuda a guiar al usuario a través del contenido de una manera más atractiva, mejorando la legibilidad y la usabilidad general. Se utiliza con frecuencia en menús, botones para “desplazarse al inicio” y enlaces de anclaje en páginas largas.

Desde una perspectiva técnica, implementar el desplazamiento suave con JavaScript es bastante sencillo. Los navegadores modernos ya ofrecen soporte integrado para el comportamiento de desplazamiento suave, lo que significa que puedes lograr el efecto con un mínimo de código. Al mismo tiempo, puedes personalizar la lógica de desplazamiento si necesitas un mayor control sobre la velocidad, el desplazamiento o la animación.

En este artículo, veremos una forma sencilla de implementar el desplazamiento suave usando JavaScript, para que la navegación de tu sitio web sea limpia y sin esfuerzo.

HTML

<ul class="nav-block">
  <li><a href="#first">First block</a></li>
  <li><a href="#second">Second block</a></li>
  <li><a href="#third">Third block</a></li>
  <li><a href="#fourth">Fourth block</a></li>
</ul>

El atributo id se utiliza para designar un ancla. Por ejemplo:

<div id="first">
Some your content...
</div>

JavaScript

const els = document.querySelectorAll('.nav-block a');

els.forEach((el) => {

  el.addEventListener('click', (ev) => {
    ev.preventDefault();

    const id = el.getAttribute('href').slice(1);
    const block = document.getElementById(id);

    if (block) {
      window.scrollTo({
        top: block.offsetTop,
        behavior: 'smooth',
      });
    }
  });
});

Si usa jQuery en su proyecto, entonces puede escribir casi lo mismo usando esta biblioteca de JavaScript.

jQuery

$('.nav-block a').on('click', function(ev) {
    ev.preventDefault();
  
    const id  = $(this).attr('href');
    const top = $(id).offset().top;
  
    $('body,html').stop().animate({scrollTop: top}, 1000);
});

1000 – tiempo de desplazamiento en milisegundos