Something went wrong. Try again.
lightweight, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344/* scroll-to-top for dev.css v6, a lightweight CSS framework - https://tangled.org/devins.page/dev.css *//* about: shows a "scroll to top" button in the bottom right corner of the screen when scrolling */
if (!document.querySelector(".dc-scroll-to-top")) { const style = document.createElement("style"); style.textContent = ` .dc-scroll-to-top { transition: opacity 0.25s; opacity: 0; pointer-events: none; padding: 0; position: fixed; bottom: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; } .dc-scroll-to-top.visible { opacity: 0.5; pointer-events: auto; } `; document.head.appendChild(style);
const scrollToTopButton = document.createElement("button"); scrollToTopButton.textContent = "▲"; scrollToTopButton.classList.add("dc-scroll-to-top"); document.body.appendChild(scrollToTopButton);
let scrolled = false; window.addEventListener("scroll", () => { const nowScrolled = window.scrollY > 0; if (nowScrolled !== scrolled) { scrolled = nowScrolled; scrollToTopButton.classList.toggle("visible", scrolled); } });
scrollToTopButton.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" }); });}