Astro 博客添加返回顶部按钮

首先找到你想要添加按钮的页面，这里我以文章页为例，打开你的博客文件夹，进入 src/layouts/BlogPost.astro 路径下，在 body 标签中找到合适的位置插入 HTML 代码，这里选择将代码放在 article 标签后，代码示例如下：

<button id="back-to-top" aria-label="Back to top">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor">
    <path
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
      d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
  </svg>
</button>

以上代码中，#back-to-top 是按钮的 ID，用来在在 CSS 和 JavaScript 中选择这个按钮，而 aria-label 是一个可访问性属性，用来添加描述。在插入 HTML 元素后，接下来就是添加 CSS 代码，调整按钮样式，代码示例如下：

#back-to-top {
  display: none; /* 默认隐藏按钮 */
  position: fixed; /* 让按钮固定在页面右下角 */
  bottom: 20px;
  right: 40px;
  background-color: #fff; /* 按钮背景颜色 */
  border: none;
  border-radius: 50%; /* 让按钮呈现圆形 */
  padding: 10px;
  cursor: pointer;
  width: 40px; /* 按钮宽度 */
  height: 40px; /* 按钮高度 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

如果你不想在手机或平板上显示这个按钮，可以在 CSS 样式表中插入以下代码，这里的 max-width 可以根据你自己的需求进行更改。

@media (max-width: 1024px) {
  #back-to-top {
    display: none !important;
  }
}

添加完 HTML 和 CSS 后，接下来就是为按钮添加 JS 代码，来实现点击按钮即回到页面顶部。JS 代码需放在 body 结束标签前，即 </body> 前，代码示例如下：

// 获取 ID 为 'back-to-top' 的元素，这是你的返回顶部按钮
const backToTopButton = document.getElementById("back-to-top");

// 监听 window 对象的 'scroll' 事件，当用户滚动页面时会触发这个事件
window.addEventListener("scroll", () => {
  // window.pageYOffset 是页面垂直方向已滚动的像素数
  // 如果这个值大于 100，说明用户已经向下滚动了一段距离
  if (window.pageYOffset > 100) {
    // 显示返回顶部按钮
    backToTopButton.style.display = "block";
  } else {
    // 否则，隐藏返回顶部按钮
    backToTopButton.style.display = "none";
  }
});

// 监听返回顶部按钮的 'click' 事件，当用户点击按钮时会触发这个事件
backToTopButton.addEventListener("click", () => {
  // 使用 window.scrollTo 方法滚动页面
  // top: 0 表示滚动到页面的顶部
  // behavior: 'smooth' 表示平滑滚动，而不是立即跳转
  window.scrollTo({ top: 0, behavior: "smooth" });
});

完成以上步骤后，你就成功地将返回顶部按钮添加到文章页了，如果你需要在其他页面添加此按钮，只需将以上代码复制到页面的合适位置即可。