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;
  }
  &:hover {
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
}

@keyframes rotate {
  to {
    transform: rotate(2520deg);
  }
}

$(window).on("scroll", function () {
  if (window.scrollY > window.outerHeight) {
    $("#scrollToTop").addClass("active");
    setTimeout(function() {
      var theta = ($(window).scrollTop() - (window.outerHeight + (window.outerHeight/2))) / 500;
      $('#scrollToTop').css({ transform: 'rotate(' + theta + 'rad)' });
    })
  } else {
    $("#scrollToTop").removeClass("active");
  }
});

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