<div class="wrapper">
  <nav class="nav">
    <ul>
      <li><a href="#section1">To Section1</a></li>
      <li><a href="#section2">To Section2</a></li>
    </ul>
  </nav>
  <main class="main">
    <section id="section1">
      This is a Section1
    </section>
    <section id="section2">
      This is a Section2
    </section>
  </main>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.nav {
  padding: 2rem;
  box-sizing: border-box;
  > ul {
    display: flex;
    > * + * {
      margin-left: 2rem;
    }
  }
}
.main {
  flex-grow: 1;
  box-sizing: border-box;
}
section {
  padding: 2rem;
  + section {
    margin-top: 80vh;
  }
}
:target {
  color: red;
  background-color: pink;
}