<header>

  <a href="#about">about</a>

  <a href="#works">works</a>

  <a href="#contact">contact</a>

</header>

<main>

  <div id="about"></div>

  <div id="works"></div>

  <div id="contact"></div>

</main>

* {

  padding: 0;

  margin: 0;

}

​

html {

  scroll-padding-top: 50px;

  scroll-behavior: smooth;

}

​

header {

  width: 100vw;

  height: 50px;

  position: fixed;

  top: 0;

  z-index: 99999;

  background: rgba(255, 255, 255, .35);

  display: flex;

  align-items: center;

  justify-content: space-evenly;

}

​

main div{

  width: 100vw;

  height: 100vh;

}

​

#about{

  background: #e76f51;

}

​

#works{

  background: #f4a261;

}

​

#contact{

  background: #e9c46a;

}