diff --git a/src/components/MoveToTopButton/index.astro b/src/components/MoveToTopButton/index.astro
new file mode 100644
index 0000000000..39d05ff097
--- /dev/null
+++ b/src/components/MoveToTopButton/index.astro
@@ -0,0 +1,37 @@
+---
+const { class: customClass = "" } = Astro.props;
+---
+
+<a
+ id="moveToTop"
+ class={`move-to-top hidden outline outline-1 outline-type-color py-2 px-4 flex flex-nowrap w-fit items-center justify-center rounded-full hover:bg-sidebar-type-color hover:text-bg-color hover:no-underline ${customClass}`}
+ href="#"
+ title="Go to top"
+>
+ <span>↑</span>
+</a>
+
+<script>
+ const moveToTopButton = document.getElementById("moveToTop");
+
+ // Ensure the element exists before accessing its methods
+ if (moveToTopButton) {
+ // Show the button when the user scrolls 100px down from the top
+ window.onscroll = function () {
+ if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+ moveToTopButton.classList.add("visible");
+ moveToTopButton.classList.remove("hidden");
+ } else {
+ moveToTopButton.classList.add("hidden");
+ moveToTopButton.classList.remove("visible");
+ }
+ };
+
+ // Scroll smoothly to the top when the button is clicked
+ moveToTopButton.addEventListener("click", (event) => {
+ event.preventDefault(); // Prevent default anchor behavior
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ });
+ }
+</script>
+
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index e711c57b2a..51ccf0d912 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -11,6 +11,8 @@ import "@styles/base.scss";
import type { CollectionEntry } from "astro:content";
import { getCollectionInLocaleWithFallbacks } from "@pages/_utils";
import { removeLocalePrefix } from "@i18n/utils";
+import MoveToTopButton from "@components/MoveToTopButton/index.astro";
+import "@styles/move-to-top.scss";
interface Props {
title: string;
@@ -21,7 +23,6 @@ interface Props {
variant?: "root" | "item" | "search" | "homepage";
topic?: PageTopic;
mainContentParentClass?: string;
- /* Only needed for the homepage */
homepageConfig?: CollectionEntry<"homepage">;
}
@@ -62,10 +63,7 @@ const headerTopic = topic
: { name: t(capitalize(fallbackTopic)) as string, url: `/${fallbackTopic}` };
---
-<html
- class={`${titleClass.toLowerCase()} ${className} scroll-smooth`}
- lang={currentLocale}
->
+<html class={`${titleClass.toLowerCase()} ${className} scroll-smooth`} lang={currentLocale}>
<head>
<script is:inline>
// Get any theme settings and apply before load
@@ -124,5 +122,6 @@ const headerTopic = topic
</main>
<Footer />
</div>
+ <MoveToTopButton />
</body>
</html>
diff --git a/styles/move-to-top.scss b/styles/move-to-top.scss
new file mode 100644
index 0000000000..67bdb7bdf3
--- /dev/null
+++ b/styles/move-to-top.scss
@@ -0,0 +1,47 @@
+.move-to-top {
+ position: fixed;
+ bottom: 4.5rem;
+ right: 1.5rem;
+ padding: 0.75rem;
+ background-color: #000000;
+ color: #ffffff;
+ border-radius: 50%;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.3s ease, transform 0.3s ease;
+ z-index: 1000;
+ cursor: pointer;
+ font-size: 0.875rem;
+ }
+
+ .move-to-top.hidden {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .move-to-top.visible {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ .move-to-top:hover {
+ background-color: #333333;
+ }
+
+ .move-to-top:focus {
+ outline: none;
+ box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
+ }
+ .move-to-top:active {
+ background-color: #1a1a1a;
+ }
+ @media screen and (max-width: 640px) {
+ .move-to-top {
+ bottom: 2rem;
+ right: 1rem;
+ padding: 0.5rem;
+ font-size: 0.75rem;
+ }
+ }
+
\ No newline at end of file