From c5c4e8bb133c8eeebe222d54095bc7e4e8f60782 Mon Sep 17 00:00:00 2001
From: intergrav <intergrav@proton.me>
Date: Tue, 16 Jul 2024 04:00:36 -0400
Subject: [PATCH] feat: scroll-to-top.js addon

---
 README.md              | 12 +++++++++++-
 addon/scroll-to-top.js | 24 ++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 addon/scroll-to-top.js

diff --git a/README.md b/README.md
index ed7ec92..f955ff1 100644
--- a/README.md
+++ b/README.md
@@ -65,7 +65,7 @@ To learn about other HTML elements and how to write HTML, visit [W3Schools/html]
 
 ## Addons
 
-dev.css provides a basic set of styles. Addons are small CSS snippets that can be used to adjust or add functionality to dev.css based on your needs. If you are adding an addon, make sure to include it **after** the main dev.css file. Here are a few built-in addons.
+dev.css provides a basic set of styles. Addons are small CSS or JS snippets that can be used to adjust or add functionality to dev.css based on your needs. Here are the built-in addons.
 
 ### `header-sticky.css`
 
@@ -91,6 +91,16 @@ This addon turns the header into a sidebar on wide displays. The navigation item
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
 ```
 
+### `scroll-to-top.js`
+
+This addon creates a small "scroll to top" button in the bottom right corner of your website when the user scrolls down. The button uses the default dev.css button style. The button is slightly opaque so that you can see it but it doesn't block the view. To use this addon, add the following line after the `dev.css` import:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/scroll-to-top.min.js" defer></script>
+```
+
+```
+
 ## Themes
 
 dev.css supports custom colors and fonts through themes. You can find some pre-made themes in the `/theme` folder. To use a theme, simply apply it after the dev.css stylesheet. There are themes inspired by terminals, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, add the following line after the `dev.css` import:
diff --git a/addon/scroll-to-top.js b/addon/scroll-to-top.js
new file mode 100644
index 0000000..8d12a7a
--- /dev/null
+++ b/addon/scroll-to-top.js
@@ -0,0 +1,24 @@
+/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
+/* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */
+
+const scrollToTopButton = document.createElement("button");
+scrollToTopButton.textContent = "▲";
+Object.assign(scrollToTopButton.style, {
+	transition: "0.25s",
+	opacity: "0",
+	padding: "0",
+	position: "fixed",
+	bottom: "1rem",
+	right: "1rem",
+	width: "2.5rem",
+	height: "2.5rem",
+});
+document.body.appendChild(scrollToTopButton);
+
+window.addEventListener("scroll", () => {
+	scrollToTopButton.style.opacity = window.scrollY > 0 ? "0.5" : "0";
+});
+
+scrollToTopButton.addEventListener("click", () => {
+	window.scrollTo({ top: 0, behavior: "smooth" });
+});
-- 
2.54.0