feat: 返回顶部

src/assets/icon/back-top.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1784382428422" class="icon" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5545" xmlns:xlink="http://www.w3.org/1999/xlink" width="202.1484375" height="200"><path d="M513.407379 0C230.713951 0 1.407379 229.306573 1.407379 512c0 282.693427 229.306573 512 512 512 282.693427 0 512-229.293792 512-512C1025.407379 229.306573 796.100806 0 513.407379 0z m26.17579 817.737837c-6.812352 6.799571-16.756085 10.991787-26.17579 10.991787-9.943733 0-19.37622-4.192216-26.175791-10.991787-6.799571-6.812352-10.991787-16.756085-10.991787-26.699818 0-9.943733 4.192216-19.900247 10.991787-26.699818s16.756085-10.991787 26.175791-10.991787c9.943733 0 19.363439 4.192216 26.17579 10.991787s10.991787 16.756085 10.991787 26.699818c0 9.943733-4.192216 19.887466-10.991787 26.699818z m-26.17579-87.435832c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605z m258.089717-237.678225c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.646726 206.798972c15.184004-15.184004 40.31174-15.184004 55.495743 0l230.354627 230.341845c15.184004 15.171222 15.184004 39.774932 0 55.482963z m0 0" p-id="5546"></path><path d="M771.497096 492.636561c-7.847625 7.860406-17.804139 11.515814-27.747872 11.515814-9.943733 0-19.900247-3.668189-27.747871-11.515814l-163.343069-163.343069v261.23388c0 21.472328-17.804139 39.263686-39.263686 39.263686s-39.263686-17.791358-39.263687-39.263686V329.293492l-163.330287 163.343069c-15.184004 15.184004-40.31174 15.184004-55.495744 0-15.184004-15.184004-15.184004-40.31174 0-55.495744L485.659507 206.798972c15.184004-15.184004 40.31174-15.184004 55.495744 0l230.354626 230.341845c15.171222 15.184004 15.171222 39.787713-0.012781 55.495744zM513.407379 730.302005c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.756085 37.167577 37.691605 0 20.948301-16.756085 37.691605-37.167577 37.691605M513.407379 828.729624c-20.424274 0-37.167578-16.743304-37.167578-37.691605 0-20.424274 16.743304-37.691605 37.167578-37.691605 20.411493 0 37.167578 16.743304 37.167577 37.691605 0 20.93552-16.756085 37.691605-37.167577 37.691605" fill="#FFFFFF" p-id="5547"></path></svg>

src/components/BackTop.astro

@@ -0,0 +1,66 @@
+---
+import {Image} from "astro:assets";
+import backTopIcon from "../assets/icon/back-top.svg";
+---
+
+<button class="back-top" type="button" aria-label="返回顶部" hidden>
+  <Image src={backTopIcon} alt=""/>
+</button>
+
+<script>
+  const backTop = document.querySelector<HTMLButtonElement>(".back-top")
+
+  const toggleBackTop = () => {
+    if (!backTop) return;
+
+    backTop.hidden = window.scrollY <= 500;
+  };
+
+  backTop && backTop.addEventListener("click", () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  });
+
+  window.addEventListener("scroll", toggleBackTop, {passive: true});
+
+  toggleBackTop();
+</script>
+
+<style>
+  .back-top {
+    position: fixed;
+    right: 150px;
+    bottom: 100px;
+    width: 44px;
+    height: 44px;
+    z-index: 999;
+    cursor: pointer;
+    padding: 0;
+    border: none;
+    background: transparent;
+  }
+
+  .back-top[hidden] {
+    display: none;
+  }
+
+  .back-top :global(img) {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .back-top:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 4px;
+  }
+
+  @media (max-width: 768px) {
+    .back-top {
+      right: 24px;
+      bottom: 48px;
+    }
+  }
+</style>

src/layouts/Layout.astro

@@ -3,6 +3,7 @@ import "@/styles/global.css";
 
 import BaseHeader from "@/components/BaseHeader.astro";
 import BaseFooter from "@/components/BaseFooter.astro";
+import BackTop from "@/components/BackTop.astro";
 
 import { metadata } from "@/consts.ts";
 const { siteTitle } = metadata;
@@ -31,5 +32,6 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
       <slot />
     </main>
     <BaseFooter />
+    <BackTop />
   </body>
 </html>