<nav>
      <a href="#section1">Section 1</a>
      <a href="#section2">Section 2</a>
      <a href="#section3">Section 3</a>
    </nav>

    <div class="container">
      <section id="section1"></section>
      <section id="section2"></section>
      <section id="section3"></section>
    </div>
*{
  padding: 0;
  margin: 0;
}

.container{
    height: 100vh;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

nav{
    background: salmon;
    width: 100%;
    text-align: center;
    padding: 20px;
    position: fixed;
}

nav a{
    text-decoration: none;
    text-transform: uppercase;
    font-family: helvetica;
    font-weight: bold;
    color: #fff;
    margin-left: 2em;
}

#section1,
#section2,
#section3{
    height: 100vh;
    width: 100%;
}

#section1{
    background: yellow;
}

#section2{
    background: orange;
}

#section3{
    background: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.