Lo puedes hacer de varias maneras en realidad. Lo común es colocarlo de manera global.
Respuesta corta: Yo siempre lo coloco como estilo en el elemento HTML.
html {
scroll-behavior: smooth;
}
Respuesta larga: Depende de qué elementos quieres que se desplacen de manera suavizada.
Primero debe quedarte claro que la propiedad CSS scroll-behavior: smooth se utiliza para definir el comportamiento de desplazamiento de un contenedor de desplazamiento, incluyendo el documento entero.
Por tanto, si quieres que todo el desplazamiento en la página se realice de manera suave, debes aplicar esta propiedad al elemento html o body. Parece ser más recomendable aplicarlo al html para asegurarse de que se aplique de manera consistente en todos los navegadores.
Ahora bien, si solo quieres aplicar el desplazamiento suave a un contenedor específico y no a toda la página, puedes aplicar scroll-behavior: smooth solo a ese contenedor. Por ejemplo, si tienes un contenedor sobre el que puedas hacer scroll (tenga el overflow activado) y quieres que el desplazamiento dentro de ese contenedor sea suave, puedes hacerlo así:
.contenedor-suave {
overflow: auto;
scroll-behavior: smooth;
}
Y el HTML correspondiente sería algo así:
<div class="contenedor-suave">
<p>lorem ipsumm...</p>
<p>pon mucho contenido para que desborde y se cree desplazamiento</p>
</div>
En este caso, solo el desplazamiento dentro del elemento con la clase .contenedor-suave será suave, y no afectará al desplazamiento de la página en general.