Footer Handoff — Back to Top Button

Source Code

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

<!-- TB-2057 / Footer Handoff | place inside the existing footer (script will move it to footer) -->
<button class="backtop tb-btt-button w2057 footer-backtop" type="button" aria-label="Back to top"><span class="w57line"></span><span class="w57text">BACK TO TOP</span><span class="w57up">↗</span></button>

/* TB-2057 / Footer Handoff */
.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}
.w2057{position:absolute;opacity:1;visibility:visible;pointer-events:auto;transform:none;right:clamp(22px,6vw,80px);top:44px;border:0;color:inherit;background:transparent;padding:12px 0;display:flex;align-items:center;gap:18px;height:48px;font:700 11px Arial,sans-serif;letter-spacing:.15em}.w57line{height:1px;width:48px;background:currentColor;transition:width .3s}.w57up{font:400 21px Georgia,serif;transform:rotate(-45deg);transition:transform .3s}.w2057:hover .w57line{width:75px}.w2057:hover .w57up{transform:rotate(-45deg) translate(4px,-4px)}.w2057.is-hidden{opacity:1;pointer-events:auto;visibility:visible;transform:none}.w2057:not(.is-visible){opacity:1;pointer-events:auto;transform:none}@media(max-width:480px){.w2057{top:43px;right:20px;left:auto;gap:7px}.w57line{width:12px}.w57text{font-size:0}.w57text:after{content:'TOP';font-size:10px}.w57up{font-size:19px}}
@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}}

.w2057{right:clamp(20px,6vw,90px);top:50px;min-width:181px;justify-content:flex-end;gap:12px;letter-spacing:.11em;padding:9px 0;border-bottom:1px solid currentColor;}
.w2057 .w57line{flex:0 0 21px;}
.w2057:hover{opacity:.7;transform:translateY(-3px)}
@media(max-width:650px){.w2057{position:relative;top:auto;right:auto;left:auto;margin:24px 0 10px auto;min-width:0;width:max-content;height:47px;max-width:100%;}}

(()=>{'use strict';const button=document.querySelector('.backtop');if(!button)return;const footerOnly=button.classList.contains('footer-backtop');if(footerOnly){const foot=document.querySelector('footer');if(foot&&!foot.contains(button)){if(getComputedStyle(foot).position==='static')foot.style.position='relative';foot.appendChild(button);}}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

Cultural institutions and brand sites with a dedicated footer navigation.

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.