HTML CSS JS
(a quick guide)
AN "UP ARROW" IMAGE <img src="up.png" id="top" onclick="totop()">
#top { FIX AT BOTTOM RIGHT CORNER position: fixed; bottom: 20px; right: 20px; z-index: 999; HIDDEN BY DEFAULT display: none; }
SHOW BUTTON #top.show { display: block; }
SMOOTH SCROLL TO TOP const totop = () => window.scroll({ top: 0, left: 0, behavior: "smooth" });
SHOW/HIDE BUTTON ON SCROLL const togtop = () => { if (window.scrollY >= 100) { document.getElementById("top") .classList.add("show"); } else { document.getElementById("top") .classList.remove("show"); } }; window.addEventListener("scroll", togtop); window.addEventListener("resize", togtop);