gb/mercury
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity Actions

feat: add back to top button and group with theme switcher

Browse source
This commit is contained in:
grassblock 2025-05-03 20:53:47 +08:00
parent c6db8689b4
commit 350f6f3865
2 changed files with 32 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/BackToTop.astro Normal file
View file

@ -0,0 +1,27 @@
---
---
<button id="toTopBtn" title="Go to top">Top</button>
<script>
// Get the button
let toTopButton = document.getElementById("toTopBtn");
// When the user scrolls down from the top of the document, show the button
window.addEventListener("scroll", ()=> {
if (window.scrollY < document.documentElement.clientHeight) {
toTopButton.classList.remove('fade-in');
toTopButton.classList.add('fade-out');
toTopButton.style.display = 'block';
} else {
toTopButton.classList.remove('fade-out');
toTopButton.classList.remove('fade-in');
}
})
// When the user clicks on the button, scroll to the top of the document
toTopButton.addEventListener("click", toTop);
function toTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

6
src/layouts/Layout.astro
View file

@ -2,6 +2,7 @@
import '../styles/global.css'; import '../styles/global.css';
import Search from '../components/Search.astro'; import Search from '../components/Search.astro';
import ThemeSwitcher from '../components/ThemeSwitcher.astro'; import ThemeSwitcher from '../components/ThemeSwitcher.astro';
import BackToTop from "../components/BackToTop.astro";
import { siteConfig } from "../config"; import { siteConfig } from "../config";
interface Props { interface Props {
@ -26,7 +27,6 @@ const { title, path = formattedPath } = Astro.props;
<title>{title}</title> <title>{title}</title>
</head> </head>
<body> <body>
<ThemeSwitcher />
<main> <main>
<div class="container"> <div class="container">
<div class="terminal-path"> <div class="terminal-path">
@ -47,6 +47,10 @@ const { title, path = formattedPath } = Astro.props;
</main> </main>
<footer class="footer"> <footer class="footer">
<div class="floating">
<BackToTop/>
<ThemeSwitcher/>
</div>
<div class="container"> <div class="container">
Powered by <a href="https://git.gb0.dev/gb/mercury"><img src="/mercury.svg" width="16px" alt="mercury logo" /> mercury</a> Powered by <a href="https://git.gb0.dev/gb/mercury"><img src="/mercury.svg" width="16px" alt="mercury logo" /> mercury</a>
</div> </div>