<div id="top"></div>
<a href="#bottom">to bottom</a>
<div id="bottom"></div>
<a href="#top">to top</a>

@keyframes smoothscroll1 {
  from, to {
    scroll-behavior: smooth;
  }
}

@keyframes smoothscroll2 {
  from, to {
    scroll-behavior: smooth;
  }
}


html {
  animation: smoothscroll1 1s;
}

html:focus-within {
  animation-name: smoothscroll2;
  scroll-behavior: smooth;
}

a {
  display: block;
}

#bottom {
  margin-top: 1000vh;
}