<header>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</header>

<article id="page-1">1</article>
<article id="page-2">2</article> 
<article id="page-3">3</article>
*
  margin 0
  padding 0
  box-sizing border-box

html
  overflow-y scroll
  scroll-behavior smooth

body
  overflow hidden

article
  min-height 100vh
  display flex
  align-items center
  justify-content center
  font-size 5em
  background #f2f2f2

header
  background black
  position fixed
  top 0
  left 0
  right 0
  display flex
  align-items center
  a
    display inline-block
    width 50px
    text-decoration none
    color white
    padding 1rem
    text-align center
    transition .2s
    &:hover
      background #222
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.