- sections = [1, 2, 3, 4, 5]

.container
  header.header
    h1 fixed header
  main.main
    each val in sections
      section.block(id=val)
        h2= val
  nav.nav
    ul.nav-list
      each val in sections
        li.nav-list__item
          a(href="#" + val)= val
  a(href="#").totop totop
View Compiled 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  z-index: 1;
  text-align: center;
  box-shadow: 0px 1px 5px rgba(0,0,0,.2);
  background: #f5e9e9;
}

.main {
  z-index: 0;
  flex: 1 1 auto;
  overflow: auto;
  scroll-behavior: smooth;
}

.nav {
  z-index: 1;
  box-shadow: 0px -1px 5px rgba(0,0,0,.2);
  background: #f5e9e9;
}

.nav-list {
  display: flex;
  list-style: none;
  &__item {
    width: 25%;
    text-align: center;
    line-height: 2;
  }
}

.block {
  height: 100vh;
  display: flex;
  justify-content: center;
  padding-top: 1em;
  
  &:nth-of-type(odd) {
    background: #9e3838;
    color: #fff;
  }

  &:nth-of-type(even) {
    background: #e2a0a0;
    color: #fff;
  }
}

.totop {
  display: none;
  position: fixed;
  bottom: 3em;
  right: 1em;
  background: #fff;
}
View Compiled 
const main = document.querySelector('.main');
const totopButton = document.querySelector('.totop');

totopButton.show = function() {
  this.style.display = 'inline-block';
}

totopButton.hide = function() {
  this.style.display = 'none';
}

main.totop = function() {
  this.scrollTo({top: 0});
}

function onScroll() {
  if (main.scrollTop > 500) {
    totopButton.show()
  } else {
    totopButton.hide()
  }
}

totopButton.addEventListener('click', main.totop.bind(main));
main.addEventListener('scroll', onScroll, {passive: true});
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.