tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: scroll-to-top.js addon
+11
-1
README.md
+11
-1
README.md
···
65
65
66
66
## Addons
67
67
68
-
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.
68
+
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.
69
69
70
70
### `header-sticky.css`
71
71
···
89
89
90
90
```html
91
91
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
92
+
```
93
+
94
+
### `scroll-to-top.js`
95
+
96
+
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:
97
+
98
+
```html
99
+
<script src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/scroll-to-top.min.js" defer></script>
100
+
```
101
+
92
102
```
93
103
94
104
## Themes
+24
addon/scroll-to-top.js
+24
addon/scroll-to-top.js
···
1
+
/* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
2
+
/* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */
3
+
4
+
const scrollToTopButton = document.createElement("button");
5
+
scrollToTopButton.textContent = "▲";
6
+
Object.assign(scrollToTopButton.style, {
7
+
transition: "0.25s",
8
+
opacity: "0",
9
+
padding: "0",
10
+
position: "fixed",
11
+
bottom: "1rem",
12
+
right: "1rem",
13
+
width: "2.5rem",
14
+
height: "2.5rem",
15
+
});
16
+
document.body.appendChild(scrollToTopButton);
17
+
18
+
window.addEventListener("scroll", () => {
19
+
scrollToTopButton.style.opacity = window.scrollY > 0 ? "0.5" : "0";
20
+
});
21
+
22
+
scrollToTopButton.addEventListener("click", () => {
23
+
window.scrollTo({ top: 0, behavior: "smooth" });
24
+
});