Cómo suavizar el desplazamiento a una sección de la página con jQuery

Para plantillas de una página y sitios web, es una práctica común desplazarse a una sección de la página al hacer clic en un enlace ancla. Aquí hay un pequeño truco de jQuery que uso a menudo para desplazarme sin problemas a una sección de la página cuando un visitante hace clic en el enlace de anclaje en el menú de navegación (o en cualquier otro lugar de la página). Ajusta el valor de la velocidad de desplazamiento 1000 a la velocidad que quieras. Este valor está en milisegundos.

$(document).on('click', 'a[href^="#"]', function (e) {
    e.preventDefault();
    $('html, body').stop().animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 1000, 'linear');
});

Así es como se ve el marcado HTML para la navegación y las secciones:

<nav>
  <a href="#features">Features</a>
  <a href="#faq">FAQ</a>
  <a href="#pricing">Pricing</a>
</nav>
<!--main container-->
<div class="container">
    <!--feature section-->
    <section id="features">...</section>
    <!--faq section-->
    <section id="faq">...</section>
    <!--pricing section-->
    <section id="pricing">...</section>
</div>

¿No quieres usar jQuery? También puede usar JavaScript estándar para un desplazamiento suave, pero es posible que no funcione en navegadores antiguos:

document.querySelectorAll('a[href^="#"]').forEach($anchor => {
    $anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth',
            block: 'start' //scroll to top of the target element
        });
    });
});

¿Tampoco eres un gran fanático de JavaScript vainilla? Esta es una solución CSS 3 pura, pero solo funciona en los navegadores más recientes:

html {
    scroll-behavior: smooth;
}