HTML CSS JS

SIMPLE HTML BACK TO TOP BUTTON

<img src="up-button.png" id="top" onclick="totop()"/>

THE HTML

01

#top {   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 function totop () {   window.scroll({ top: 0, left: 0,   behavior: "smooth" }); }

SHOW/HIDE BUTTON function 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