写一个天蓝色盒子，当滚动页面后会出现，点击之后，可以回到页面的最顶端，用html和css和JavaScript实现

好的，我可以为您提供一个实现这个功能的示例代码：

HTML:

<div class="scroll-to-top">
  <i class="fas fa-arrow-up"></i>
</div>

CSS:

.scroll-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #00bfff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.scroll-to-top i {
  color: #fff;
  font-size: 24px;
}

.scroll-to-top.active {
  opacity: 1;
  visibility: visible;
}

JavaScript:

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var scrollToTopBtn = document.querySelector('.scroll-to-top');
  if (scrollTop > 200) {
    scrollToTopBtn.classList.add('active');
  } else {
    scrollToTopBtn.classList.remove('active');
  }
});

// 监听回到顶部按钮的点击事件
var scrollToTopBtn = document.querySelector('.scroll-to-top');
scrollToTopBtn.addEventListener('click', function() {
  scrollToTop(0, 300);
});

// 平滑滚动到指定位置
function scrollToTop(to, duration) {
  if (duration <= 0) return;
  var difference = to - document.documentElement.scrollTop || document.body.scrollTop;
  var perTick = difference / duration * 10;
  setTimeout(function() {
    document.documentElement.scrollTop += perTick;
    document.body.scrollTop += perTick;
    if (document.documentElement.scrollTop === 0 && document.body.scrollTop === 0) return;
    scrollToTop(to, duration - 10);
  }, 10);
}

这段代码实现了一个天蓝色的圆形按钮，当页面滚动超过200像素时，按钮会出现。点击按钮后，页面会平滑滚动到顶部。您可以根据需要修改样式和滚动距离。