Cómo hacer scroll animado a un elemento con jQuery

El desplazamiento automático es fundamental para mejorar la experiencia de usuario (UX) en landing pages o menús de navegación. Con jQuery, podemos controlar la velocidad y el destino exacto del scroll.

$("#miBoton").on("click", function (e) {
    e.preventDefault(); // Evita el comportamiento por defecto del enlace
    
    // Animamos el scroll hacia el elemento deseado
    $('html, body').animate({
        scrollTop: $("#scrollToHere").offset().top
    }, 1000); // Velocidad ajustada a 1000ms para mejor fluidez
});

¿Qué está pasando aquí?

• .on("click"): Es la forma moderna de asignar eventos en jQuery.
• offset().top: Calcula la distancia exacta del elemento #scrollToHere respecto al inicio de la página.
• 1000: Representa el tiempo en milisegundos. 2000ms (2 segundos) suele ser demasiado lento para el usuario promedio; 800ms o 1000ms es el estándar de fluidez.