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 abruptos, el desplazamiento suave crea un movimiento fluido, lo que hace que las transiciones sean más atractivas visualmente. En este artículo, exploraremos cómo implementar el desplazamiento suave con JavaScript. No es nada difícil implementarlo. ¡Vamos a sumergirnos en ello y hacer que la navegación en su sitio web se sienta 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