lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1/* scroll-to-top for dev.css v5, a lightweight CSS framework - https://tangled.org/devins.page/dev.css */
2/* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */
3
4const scrollToTopButton = document.createElement("button");
5scrollToTopButton.textContent = "▲";
6Object.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 "border-radius": "1.25rem",
16});
17document.body.appendChild(scrollToTopButton);
18
19window.addEventListener("scroll", () => {
20 scrollToTopButton.style.opacity = window.scrollY > 0 ? "0.5" : "0";
21});
22
23scrollToTopButton.addEventListener("click", () => {
24 window.scrollTo({ top: 0, behavior: "smooth" });
25});