htmlに指定すると、ページ内リンクでもscrollTo()でも、スクロールが滑らかになります。 移動はブラウザに任せるため、URLの#や:targetも、リンク本来のとおりに更新されます。

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

ページ内リンクのクリックを止め、JavaScriptでスクロール位置を少しずつ動かしていました。 クリックを止めるため、URLの#は変わらず、:targetも当たりません。

for (const link of document.querySelectorAll('a[href^="#"]')) {
  link.addEventListener('click', (event) => {
    const id = decodeURIComponent(link.hash.slice(1))
    const target = document.getElementById(id)
    if (!target) return
    event.preventDefault()
    const start = window.scrollY
    const distance = target.getBoundingClientRect().top
    const duration = 500
    let startTime
    const step = (time) => {
      if (startTime === undefined) startTime = time
      const progress = Math.min((time - startTime) / duration, 1)
      window.scrollTo(0, start + distance * progress)
      if (progress < 1) requestAnimationFrame(step)
    }
    requestAnimationFrame(step)
  })
}