Desplazamiento suave al hacer clic en un enlace ancla

Al navegar por una página web con enlaces ancla, los usuarios esperan una transición perfecta a la sección de destino. Sin embargo, el comportamiento de desplazamiento predeterminado puede ser abrupto. Este artículo explora técnicas para lograr un desplazamiento fluido al hacer clic en enlaces ancla.

Soporte nativo

Navegadores como Chrome y Firefox han introducido soporte nativo para un desplazamiento fluido. Esto se implementa utilizando la propiedad "comportamiento" con el valor "suave" al desplazarse hacia la vista:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Complemento jQuery

Para navegadores más antiguos, un complemento jQuery puede suavizar la animación de desplazamiento. Esta técnica utiliza el método "animar" para mover la página a la sección de destino:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

Técnica mejorada

Si el elemento de destino carece de ID, se puede utilizar el siguiente complemento jQuery modificado:

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="'   $.attr(this, 'href').substr(1)   '"]').offset().top
    }, 500);

    return false;
});

Optimización del rendimiento

Almacenar en caché el selector "$('html, body')" dentro de una variable mejora el rendimiento:

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

Preservar el hash de URL

Para actualizar el hash de URL al desplazarse suavemente, utilice la devolución de llamada "animada":

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

Al implementar una de estas técnicas, puede proporcionar una experiencia de desplazamiento pulida y fácil de usar al navegar por su página utilizando enlaces ancla.