Rolagem suave ao clicar em um link âncora

Ao navegar em uma página da web com links âncora, os usuários esperam uma transição perfeita para a seção de destino. No entanto, o comportamento de rolagem padrão pode ser abrupto. Este artigo explora técnicas para obter uma rolagem suave ao clicar em links âncora.

Suporte nativo

Navegadores como o Chrome e o Firefox introduziram suporte nativo para rolagem suave. Isso é implementado usando a propriedade "behavior" com o valor "smooth" ao rolar para a visualização:

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

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

jQuery Plugin

Para navegadores mais antigos, um plugin jQuery pode suavizar a animação de rolagem. Esta técnica usa o método "animate" para mover a página para a seção de destino:

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

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

Técnica aprimorada

Se o elemento de destino não tiver um ID, o seguinte plugin jQuery modificado pode ser usado:

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

    return false;
});

Otimização de desempenho

Armazenar em cache o seletor "$('html, body')" dentro de uma variável melhora o desempenho:

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

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

    return false;
});

Preservando o hash do URL

Para atualizar o hash do URL durante a rolagem suave, use o retorno de chamada "animate":

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;
});

Ao implementar uma dessas técnicas, você pode fornecer uma experiência de rolagem refinada e fácil de usar ao navegar em sua página usando links âncora.