A rolagem suave é algo bastante simples, mas faz uma diferença. Geralmente um javascript é usado para atingir este efeito, porém, com a evolução dos recursos no CSS, agora é possível obter um resultado parecido.

Trata-se da propriedade CSS chamada scroll-behavior. No momento, ainda há algumas limitações quanto aos navegadores que suportam, mas são bem poucos.

Limitações

Na data de publicação deste artigo, dos navegadores que testei, apenas o Safari ainda não possui este suporte. Todos os navegadores baseados no Chromium possuem, assim como o Firefox. No final do artigo deixei um link com todos os navegadores que suportam.

Além disso, não é possível personalizar a velocidade da rolagem. Isto fica a cargo de cada navegador. Se você deseja personalizar o comportamento deste efeito, esta solução não é para você.

O código

html {
  scroll-behavior: smooth
}

Acima o exemplo é aplicado para o elemento <html>. No entanto, esta propriedade pode ser aplicada a qualquer elemento que possua overflow: scroll, ou seja, que tenha rolagem de conteúdo. Basta colocar o nome da classe do elemento e voilà: o efeito será atingido.

.rolo {
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  width: 200px;
}

O outro valor possível para a propriedade é o auto, mas seria o mesmo que não usa-lá, já que é o comportamento padrão normal da rolagem, sem rolagem suave.

Entre usar esta propriedade ou um javascript, fico com o CSS, mesmo. Aqui no blog eu o utilizo desta forma. Tenho para mim que se algo poder ser feito sem usar um script, que seja assim.