Reveal Edge — Back to Top Button

Source Code

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

<!-- TB-2053 / Reveal Edge | paste before closing body -->
<button class="backtop tb-btt-button w2053" type="button" aria-label="Back to top"><span class="w53tip">↑</span><span class="w53word">BACK TO TOP</span></button>

/* TB-2053 / Reveal Edge */
.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}
.w2053{right:0;bottom:52px;display:flex;align-items:center;justify-content:flex-start;gap:15px;padding:0 0 0 15px;width:52px;height:56px;background:#c5eb75;color:#273322;border:0;overflow:hidden;transition:width .36s cubic-bezier(.2,.8,.2,1)}.w53tip{font:500 29px/1 Georgia,serif;flex-shrink:0;width:23px}.w53word{font:700 10px/1.2 Arial,sans-serif;letter-spacing:.12em;white-space:nowrap}.w2053:hover,.w2053:focus-visible{width:165px}.w2053:active{background:#b6dd65}@media(pointer:coarse){.w2053{width:108px}.w53word{font-size:9px;letter-spacing:0}}
@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}}

.w2053{right:0;bottom:clamp(70px,16vh,155px);width:58px;height:65px;gap:16px;padding-left:17px;box-shadow:-5px 7px 0 #24322738;}
.w2053:hover,.w2053:focus-visible{width:183px;box-shadow:-9px 9px 0 #24322738;}
.w2053 .w53tip{font-size:33px}.w2053 .w53word{font-size:11px;letter-spacing:.08em;}
@media(pointer:coarse){.w2053{width:125px;height:58px;gap:9px;bottom:100px;padding-left:13px}.w2053 .w53tip{font-size:26px}.w2053 .w53word{font-size:10px;letter-spacing:0}}

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

Creative studios and expressive but practical portfolio 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.