Everyday Pill — Back to Top Button

Source Code

Copy the HTML, CSS or JavaScript you need for your project.

<!-- TB-2060 / Everyday Pill | paste before closing body -->
<button class="backtop tb-btt-button w2060" type="button" aria-label="Back to top"><span class="w60icon">↑</span><span class="w60label">BACK TO TOP</span></button>

/* TB-2060 / Everyday Pill */
.backtop{box-sizing:border-box;position:fixed;z-index:50;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);text-align:center;transition:opacity .24s, transform .28s, visibility .24s}.backtop.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.backtop.w2055.is-visible{transform:translate(-50%,0)}.backtop:focus-visible{outline:3px solid #e7ab4c;outline-offset:4px}
.w2060{right:25px;bottom:26px;min-width:152px;height:49px;border:1px solid #477e75;border-radius:28px;background:#fffefb;color:#285e57;display:flex;gap:11px;align-items:center;padding:5px 16px 5px 6px;box-shadow:0 6px 20px #1c57471a;transition:background .25s,color .25s,box-shadow .25s}.w60icon{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:#316d65;color:white;display:grid;place-items:center;font:400 22px/1 Georgia,serif;transition:transform .25s}.w60label{white-space:nowrap;font:700 10px Arial,sans-serif;letter-spacing:.1em}.w2060:hover{background:#e7f0e9;box-shadow:0 8px 25px #1c57472b}.w2060:hover .w60icon{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* POLISH PASS 2026-10-18: alignment, tactile size, emphasis & individual character */
.backtop{isolation:isolate;-webkit-tap-highlight-color:transparent;}
.backtop:focus-visible{outline:3px solid #f0af42;outline-offset:4px;}
@media(prefers-reduced-motion:reduce){.backtop,.backtop *{transition-duration:.01ms!important;animation-duration:.01ms!important}}

.w2060{right:clamp(20px,3vw,48px);bottom:clamp(26px,5vh,57px);min-width:167px;height:52px;padding:6px 18px 6px 6px;gap:13px;border-radius:30px;box-shadow:0 5px 0 #c6ddd3,0 9px 25px #235a4926;}
.w2060 .w60label{font-size:11px;letter-spacing:.07em;white-space:nowrap;}
.w2060:hover{background:#e7f2e9;box-shadow:0 3px 0 #c6ddd3,0 7px 20px #235a4940;transform:translateY(2px)}
@media(max-width:650px){.w2060{right:15px;bottom:24px;min-width:151px;height:49px}}

(()=>{'use strict';const button=document.querySelector('.backtop');if(!button)return;const footerOnly=button.classList.contains('footer-backtop');const reduced=matchMedia('(prefers-reduced-motion: reduce)');let scheduled=false;function update(){scheduled=false;if(footerOnly)return;const shown=window.scrollY>160;button.classList.toggle('is-visible',shown);button.classList.toggle('is-hidden',!shown);button.tabIndex=shown?0:-1;button.setAttribute('aria-hidden',String(!shown));if(button.classList.contains('w2056')){const max=Math.max(1,document.documentElement.scrollHeight-innerHeight);button.style.setProperty('--progress',(Math.round(Math.min(100,scrollY/max*100)))+'%');}}function onScroll(){if(!scheduled){scheduled=true;requestAnimationFrame(update)}}button.addEventListener('click',()=>window.scrollTo({top:0,behavior:reduced.matches?'instant':'smooth'}));addEventListener('scroll',onScroll,{passive:true});addEventListener('resize',onScroll,{passive:true});update();})();

How to Use

Insert the HTML button near the end of body, load the CSS, and include JavaScript using defer. Test scrolling, returning to the top, and positioning on mobile.

Use Case

Healthcare, local services and approachable corporate websites.

Technical Notes

Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.

Mobile：Check tap target and placement on mobile devices.

Browser：Test in your supported browsers.

Reduced Motion：CSS respects prefers-reduced-motion.