向上箭头 CSS

在一些情况下，我们可能需要在网页中添加一个向上箭头，供用户快速返回页面顶部。这时，CSS 就能派上用场了。

以下是一个基本的向上箭头的 CSS 代码：

.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  display: none;
}

通过添加这个 CSS 样式，我们可以创建一个黑色的三角形向上箭头。这个箭头使用了固定定位（position: fixed），并在页面的右下角（bottom: 20px; right: 20px;）。

需要注意的是，我们将箭头的 display 属性设置为 none，因为我们需要使用 JavaScript 在页面滚动时显示或隐藏该箭头。

接下来，我们可以使用 JavaScript 来监视页面滚动事件，并根据滚动的位置来控制箭头的显示或隐藏：

const arrowUp = document.querySelector('.arrow-up');

window.addEventListener('scroll', () => {
  if (window.scrollY > 200) {
    arrowUp.style.display = 'block';
  } else {
    arrowUp.style.display = 'none';
  }
});

这个脚本会监视页面的滚动事件，并检查滚动的距离。如果滚动的垂直距离超过了 200px，就将箭头的 display 属性设置为 block，从而显示箭头。否则，就将其隐藏。

使用这个 CSS 和 JavaScript 代码，我们就可以在网站中添加一个方便的向上箭头了。

总结

本文介绍了如何使用 CSS 和 JavaScript 来创建一个向上箭头，以便用户能够方便地返回页面顶部。我们演示了一个向上箭头的 CSS 代码，以及如何使用 JavaScript 监视滚动事件来控制箭头的显示或隐藏。