只需几个简单的步骤，实现 CSS sticky 返回顶部功能！

2023-10-16 15:27:50

CSS sticky 实现返回顶部

在日常浏览网站时，我们经常会遇到需要滚动很长的页面，如果想返回顶部，就需要不断地点击浏览器顶部的后退按钮，这不仅麻烦，还会影响浏览体验。因此，许多网站都会在页面底部添加一个返回顶部按钮，方便用户快速返回顶部。

传统的返回顶部按钮通常是使用 JavaScript 实现的，但是，使用 CSS sticky 也可以轻松实现返回顶部功能，而且更加简单方便，无需考虑加载问题，几乎零成本。

HTML 结构

首先，我们需要在 HTML 中添加一个返回顶部按钮，可以使用以下代码：

<a href="#" class="back-to-top">返回顶部</a>

将此代码放在页面的底部，即可在页面底部显示一个返回顶部按钮。

CSS 样式

接下来，我们需要使用 CSS 来设置返回顶部按钮的样式，使其在滚动时自动显示。可以使用以下代码：

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #ff6600;
  color: #fff;
  font-size: 16px;
  border-radius: 50%;
  z-index: 99;
}

.back-to-top:hover {
  background-color: #ff3300;
}

.back-to-top.show {
  display: block;
}

这段 CSS 代码设置了返回顶部按钮的样式，使其在页面底部固定显示，并在滚动时自动显示。

JavaScript 代码

最后，我们需要使用 JavaScript 代码来检测滚动事件，当页面滚动到一定位置时，显示返回顶部按钮。可以使用以下代码：

window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset;
  if (scrollTop > 100) {
    document.querySelector('.back-to-top').classList.add('show');
  } else {
    document.querySelector('.back-to-top').classList.remove('show');
  }
});