<div id="top-btn"></div>

#top-btn { visibility: hidden; overflow: visible; width: 0; height: 0; position: absolute; /* Change Size */ font-size: 16px; } #top-btn > button { display: flex; align-items: center; justify-content: center; visibility: visible; width: 2.5em; height: 2.5em; position: fixed; right: 1.5em; bottom: 5em; border: none; border-radius: 0.4em; font-size: 0.8em; font-weight: bold; color: #FFF; background-color: rgba(0, 0, 0, 0.35); transition: all 200ms ease-in-out; } #top-btn > button.active { transform: scale(1.5); color: #FFF; background-color: rgba(255, 0, 150, 0.6); box-shadow: 0 0.75em 1.875em rgba(0, 0, 0, 0.5), 0 0 0.9375em rgba(255, 0, 150, 0.7 ); transform-origin: center center; }

const toTop = document.getElementById("top-btn"); if (toTop) { toTop.innerHTML = ""; const toTopBtn = document.createElement("button"); toTopBtn.textContent = "△"; toTop.appendChild(toTopBtn); toTopBtn.addEventListener("click", (e) => { e.preventDefault(); toTopBtn.classList.add("active"); window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); setTimeout(() => { toTopBtn.classList.remove("active"); }, 200); }); }

     Scroll Down
    
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1

_ _ _ _ _ _ _ _ _ _