Como animar o scrolling para anchor links com CSS

Nota: apenas traduzi o texto abaixo e postei aqui.

A propriedade scroll-behavior

A propriedade scroll-behavior informa ao navegador como lidar com o scrolling para anchor links dentro de um elemento.

O valor default, auto, dá um salto forte como você está acostumado. Um valor de scroll informa ao navegador para animar o scrolling. Não há como especificar a atenuação, mas ela está vinculada à taxa de atualização do navegador para fornecer animações suaves e sedosas.

/**
 * Habilita smooth scrolling no document inteiro
 */
html {
    scroll-behavior: smooth;
}

Aqui está uma demonstração.

Normalmente eu o habilito em todo o html document, mas você pode restringi-lo a elementos específicos, se desejar.

/**
 * Habilita smooth scrolling no elemento #be-cool
 */
#be-cool {
    scroll-behavior: smooth;
}

Preocupações com acessibilidade

As animações podem causar problemas para usuários que sofrem de enjôo e outras condições.

Felizmente, Windows, MacOs, iOS e Android oferecem uma maneira para os usuários especificarem que preferem movimentos reduzidos. E todos os navegadores modernos (mas não o IE) fornecem uma maneira de verificar essa configuração em CSS e JavaScript.

Ao usar scroll-behavior, você deve adicionar uma verificação @media para preders-reduced-motion: reduce e reverter para o default auto.

/**
 * Habilita smooth scrolling quando usuários
 * tem prefers-reduced-motion habilitado
 */
@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Suporte do navegador

A propriedade scroll-behavior funciona na maioria dos navegadores modernos. Também não tem suporte para IE.

Aqui segue a definição completa mais atual do suporte a esse recurso.

No entanto, este é um ótimo recurso aprimorado progressivamente.

Fonte

Newsletter de Go Make Things