HTML CSS JS

SIMPLE HTML BACK TO TOP BUTTON

(a quick guide)

AN "UP ARROW" IMAGE <img src="up.png" id="top" onclick="totop()">

THE HTML

01

#top {   FIX AT BOTTOM RIGHT CORNER   position: fixed; bottom: 20px;    right: 20px; z-index: 999;     HIDDEN BY DEFAULT   display: none;  }

THE CSS

02

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);

THE JAVSCRIPT

03