Layout: Onepage only with HTML and CSS (with Transition)

Question

I’m creating a layout "Onepage", however I would like to do it only with CSS and HTML. The idea is when the user click next the same will be moved to "Section 01", this already done, but I’m not able to put the effect trasition so that there is "fluidity" when changing section, as if the page scrolls down and not just jump to the next section.

Like this effect of the site Paypal

NOTE: I found some solutions using input radio e label, but I believe there must be some more direct way.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-size: 14px;
  width: 100%;
  font-family: Helvetica, sans-serif
}

.container-center {
  width: 500px;
  height: 100%;
  margin: 0 auto;
  font-size: 350%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .text {
    text-transform: uppercase;
    color: grey;
    font-weight: 600;
  }
  .next {
    font-size: 50%;
    text-transform: uppercase;
    color: yellowgreen;
  }
}

nav {
  width: inherit;
  height: 72px;
  background-color: #d9d9d9;
}

#hero {
  width: inherit;
  height: 610px;
  background-color: #e9e9e9;
}

footer {
  width: inherit;
  height: 80px;
  background-color: #d9d9d9;
}

#section-01 {
  height: 700px;
  transition: all .3s ease-out;
}

<nav>
  <div class="container-center"></div>
</nav>

<section id="hero">
  <div class="container-center">
    <span class="text">Section Hero</span>
    <a href="#section-01" class="next">Next</a>
  </div>
</section>

<footer class="footer">
  <div class="container-center"></div>
</footer>

<section id="section-01">
  <div class="container-center">
    <span class="text">Section - 01</span>
  </div>
</section>

Answer 1

You can only do it with HTML and CSS, you can use scroll-behavior: smooth; in the css of html {}

See the example below to better understand.

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}     
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
* {
  margin: 0;
  padding: 0;
}

html,
body {
  font-size: 14px;
  width: 100%;
  font-family: Helvetica, sans-serif
}

.container-center {
  width: 500px;
  height: 100%;
  margin: 0 auto;
  font-size: 350%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  .text {
    text-transform: uppercase;
    color: grey;
    font-weight: 600;
  }
  .next {
    font-size: 50%;
    text-transform: uppercase;
    color: yellowgreen;
  }
}

nav {
  width: inherit;
  height: 72px;
  background-color: #d9d9d9;
}

#hero {
  width: inherit;
  height: 610px;
  background-color: #e9e9e9;
}

footer {
  width: inherit;
  height: 80px;
  background-color: #d9d9d9;
}

#section-01 {
  height: 700px;
  transition: all .3s ease-out;
}

  <nav>
    <div class="container-center"></div>
  </nav>
  
  <section id="hero">
    <div class="container-center">
      <span class="text">Section Hero</span>
      <a href="#section-01" class="next">Next</a>
    </div>
  </section>
  
  <footer class="footer">
    <div class="container-center"></div>
  </footer>
  
  <section id="section-01">
    <div class="container-center">
      <span class="text">Section - 01</span>
    </div>
  </section>