<div class="wrap">
  <div id="page1" class="page">
    <div class="box"><a href="#page2">Go to page 2</a></div>
  </div>

  <div id="page2" class="page">
    <div class="box"><a href="#page3">Go to page 3</a></div>
  </div>

  <div id="page3" class="page">
    <div class="box"><a href="#page4">Go to page 4</a></div>
  </div>

  <div id="page4" class="page">
    <div class="box"><a href="#page1">Go Back to top</a></div>
  </div>

</div>

html,
body {
  margin: 0;
  scroll-behavior: smooth;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-text-size-adjust: 100%; /* stop ios zooming text  on orientation change */
  text-size-adjust: 100%;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}
.wrap {
  display: flex;
  height: 100vh;
  flex-direction: column;
  background: #ccc;
  overflow-y: scroll;
  scroll-behavior: smooth;
  -ms-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
}
.wrap > * {
  min-height: 100vh;
  scroll-snap-align: start;
}
.page {
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.page:nth-child(even) {
  background: teal;
}
.page a {
  color: #fff;
  text-decoration: none;
}

.box {
  width: 50vh;
  height: 50vh;
  min-width: 100px;
  min-height: 100px;
  text-align: center;
  border: 5px solid red;
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: center;
  transform: translateY(20%);
  transition: 1s ease 0.3s;
}
.page:target .box {
  transform: translateY(0%);
}
#page1 .box {
  transform: translateY(0);
}