Simple smooth scrolling with CSS

html {
  scroll-behavior: smooth;
  scroll-padding: var(--scroll-padding, 5rem);
}

Using JS to set scroll-padding

const navigation = document.querySelector(".primary-navigation");
 
const navigationHeight = navigation.offsetHeight;
 
document.documentElement.style.setProperty(
  "--scroll-padding",
  navigationHeight + "px"
);
 

Codepen: https://codepen.io/kevinpowell/pen/eYjRVmw