Civic Tile — Back to Top Button

Source Code

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

<!-- TB-2052 / Civic Tile | paste before closing body -->
<button class="backtop tb-btt-button w2052" type="button" aria-label="Back to top"><span class="w52head"><span>↑</span></span><span class="w52base">PAGE TOP</span></button>

/* TB-2052 / Civic Tile */
.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}
.w2052{right:24px;bottom:24px;width:80px;height:78px;border:1px solid #134c6d;background:#fff;color:#164361;box-shadow:0 7px 22px #10395530;display:grid;grid-template-rows:49px 28px}.w52head{display:flex;align-items:center;justify-content:center;font:400 30px Georgia,serif}.w52head span{transition:transform .25s}.w52base{background:#164f72;color:#fff;font:700 9px/28px Arial,sans-serif;letter-spacing:.06em}.w2052:hover .w52head span{transform:translateY(-5px)}.w2052:hover .w52base{background:#103e58}
@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}}

.w2052{right:clamp(20px,3vw,44px);bottom:clamp(24px,4vh,52px);width:76px;height:75px;grid-template-rows:47px 27px;border:2px solid #185375;box-shadow:0 8px 0 #c1d6dc,0 12px 25px #15394b24;}
.w2052:hover{box-shadow:0 5px 0 #c1d6dc,0 8px 22px #15394b3a;transform:translateY(3px)}
@media(max-width:650px){.w2052{right:19px;bottom:28px;width:74px;height:74px}}

(()=>{'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

Public information, civic services and content-heavy service 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.