feat: add backTop button

src/components/BackTop.astro

@@ -0,0 +1,29 @@
+<button id="backtop_btn" class="gpt-back-top-btn">
+ <svg
+ xmlns="https://www.w3.org/2000/svg"
+ width="1.2em"
+ height="1.2em"
+ viewBox="0 0 32 32"
+ ><path
+ fill="currentColor"
+ d="M16 4L6 14l1.41 1.41L15 7.83V28h2V7.83l7.59 7.58L26 14L16 4z"
+ ></path></svg
+ >
+</button>
+
+<script>
+ const backtop_btn = document.getElementById("backtop_btn") as HTMLElement;
+ backtop_btn.style.display = "none";
+
+ window.addEventListener("scroll", () => {
+ if (window.scrollY > 100) {
+ backtop_btn.style.display = "block";
+ } else {
+ backtop_btn.style.display = "none";
+ }
+ });
+
+ backtop_btn.onclick = () => {
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ };
+</script>

src/pages/index.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro'
 import Header from '../components/Header.astro'
 import Footer from '../components/Footer.astro'
 import Generator from '../components/Generator'
+import BackTop from '../components/BackTop.astro'
 import '../message.css'
 import 'katex/dist/katex.min.css'
 import 'highlight.js/styles/atom-one-dark.css'
@@ -13,6 +14,7 @@ import 'highlight.js/styles/atom-one-dark.css'
  <Header />
  <Generator client:load />
  <Footer />
+ <BackTop/>
  </main>
 </Layout>
 

unocss.config.ts

@@ -34,6 +34,7 @@ export default defineConfig({
  'gpt-copy-btn': 'absolute top-12px right-12px z-3 fcc border b-transparent w-8 h-8 p-2 bg-light-300 dark:bg-dark-300 op-90 cursor-pointer',
  'gpt-copy-tips': 'op-0 h-7 bg-black px-2.5 py-1 box-border text-xs c-white fcc rounded absolute z-1 transition duration-600 whitespace-nowrap -top-8',
  'gpt-retry-btn': 'fi gap-1 px-2 py-0.5 op-70 border border-slate rounded-md text-sm cursor-pointer hover:bg-slate/10',
+ 'gpt-back-top-btn': 'fcc p-2.5 text-base rounded-md hover:bg-slate/10 fixed bottom-20px right-20px z-10 cursor-pointer transition-colors',
  'gpt-password-input': 'px-4 py-3 h-12 rounded-sm bg-(slate op-15) base-focus',
  'gpt-password-submit': 'fcc h-12 w-12 bg-slate cursor-pointer bg-op-20 hover:bg-op-50',
  'gen-slate-btn': 'h-12 px-4 py-2 bg-(slate op-15) hover:bg-op-20 rounded-sm',