Scroll-to-Top Button

<div class="s2t-demo" id="wrap"><p>Scroll down inside this box…</p><div style="height:300px"></div><p>Keep going…</p><div style="height:300px"></div><p>The button appears bottom-right ↘</p><button class="s2t" id="s2t" aria-label="Scroll to top"><svg viewBox="0 0 24 24" width="20" height="20"><path fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M12 19V5m0 0l-6 6m6-6l6 6"/></svg></button></div>

body{background:#f6f7fa}
.s2t-demo{position:relative;width:340px;max-width:100%;height:300px;overflow:auto;background:#fff;border:1px solid #eceef3;border-radius:16px;padding:20px;font-family:system-ui,sans-serif;color:#5a627a}
.s2t{position:sticky;bottom:10px;left:100%;width:46px;height:46px;border:0;border-radius:50%;background:linear-gradient(135deg,#ff7a18,#ff477e);cursor:pointer;display:grid;place-items:center;opacity:0;transform:scale(.5);transition:.25s;box-shadow:0 8px 20px rgba(255,71,126,.4)}
.s2t.show{opacity:1;transform:scale(1)}

var w=document.getElementById('wrap'),b=document.getElementById('s2t');
w.addEventListener('scroll',function(){b.classList.toggle('show',w.scrollTop>120)});
b.onclick=function(){w.scrollTo({top:0,behavior:'smooth'})};