body {
  height: 500vh;
  background-image: linear-gradient(#eecda3 ,#f3b97b,#faaca8);
  h1 {
    text-align: center;
    font-family: 'Arial';
  }
}

#scrollToTop {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  box-shadow: 0 0 14px -5px rgba(0, 0, 0,0.5);
  border-radius: 100%;
  width: 80px;
  height: 80px;
  display: flex;
  font-family: "Arial";
  align-items: center;
  justify-content: center;
  margin-bottom: -12rem;
  transition: margin-bottom 0.2s;
  &.active {
    margin-bottom: 0;
  }
}

$(window).on('scroll',function() {
  if (window.scrollY > window.outerHeight) {
    $('#scrollToTop').addClass('active')
  } else {
    $('#scrollToTop').removeClass('active')
  }
})

$('#scrollToTop').on('click',function() {
  $("html, body").animate({ scrollTop: 0 }, 500);
})