devins.page
lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
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
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});
16document.body.appendChild(scrollToTopButton);
17
18window.addEventListener("scroll", () => {
19 scrollToTopButton.style.opacity = window.scrollY > 0 ? "0.5" : "0";
20});
21
22scrollToTopButton.addEventListener("click", () => {
23 window.scrollTo({ top: 0, behavior: "smooth" });
24});