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.