TICKET RETURN — Back to Top
A small ticket-like piece with neat cutout edges and printed TOP lettering.
A small ticket-like piece with neat cutout edges and printed TOP lettering.
Design Preview
See the design above before trying the scroll interaction.
Live Demo
Press Try scrolling in the frame, or scroll inside it. Click the lower-right button to return to the top.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
<button type="button" class="tb-btt-button tb-btt-2030 is-hidden" aria-label="Back to the top of the page" title="Back to Top"><span class="art a30"><span class="a30-paper"><span class="a30-upper">RETURN</span><span class="a30-main">TOP</span><span class="a30-perf"></span></span></span></button>/* TB-2030 — Back to Top button. */
.tb-btt-2030{--selectedtone:#916c58;color:#916c58;position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:1000;border:0;background:transparent;padding:5px;display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;cursor:pointer;font-family:Arial,"Noto Sans JP",sans-serif;line-height:normal;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:opacity .24s ease, transform .35s ease,visibility .24s ease}
.tb-btt-2030:is(:focus-visible){outline:2px solid currentColor;outline-offset:4px}
.tb-btt-2030.is-hidden{opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none}
.tb-btt-2030 *{box-sizing:border-box}
.tb-btt-2030 .art{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tb-btt-2030 .art{color:var(--selectedtone)}
.tb-btt-2030 .a30{height:82px;width:95px;color:#8e6a57!important}
.tb-btt-2030 .a30-paper{width:89px;height:68px;clip-path:polygon(0 0,100% 0,100% 37%,93% 50%,100% 63%,100% 100%,0 100%,0 63%,7% 50%,0 37%);background:#f1e5d9;border:1.5px solid #b99c82;box-shadow:0 4px 8px #8e6e6011;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;position:relative;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tb-btt-2030 .a30-upper{font:700 8px Arial,sans-serif;letter-spacing:1.7px}
.tb-btt-2030 .a30-main{font:italic 25px Georgia,serif;line-height:1}
.tb-btt-2030 .a30-perf{position:absolute;left:10px;right:10px;bottom:8px;border-top:1px dashed #c6a997}
.tb-btt-2030:is(:hover,:focus-visible) .a30-paper{transform:translateY(-7px) rotate(-3deg)}
@media(prefers-reduced-motion:reduce){.tb-btt-2030,.tb-btt-2030 *, .tb-btt-2030 *::before,.tb-btt-2030 *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
/* TB-2030 | Back to Top | No external libraries required. */
(() => {
'use strict';
const button = document.querySelector('.tb-btt-2030');
if (!button) return;
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
let scheduled = false;
function update() {
scheduled = false;
const visible = window.scrollY > 160;
button.classList.toggle('is-hidden', !visible);
button.tabIndex = visible ? 0 : -1;
button.setAttribute('aria-hidden', String(!visible));
}
function requestUpdate() {
if (scheduled) return;
scheduled = true;
requestAnimationFrame(update);
}
button.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: reduceMotion.matches ? 'auto' : 'smooth' });
});
window.addEventListener('scroll', requestUpdate, { passive: true });
window.addEventListener('resize', requestUpdate, { passive: true });
update();
})();
How to Use
Insert the HTML button near the end of body, load CSS and JavaScript (defer), then verify scrolling and return-to-top on desktop and mobile.
Use Case
Events, culture and creative publications
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Works with tap and keyboard. Check the lower-right offset against other fixed controls.
Browser: Uses standard HTML, CSS and JavaScript. Install all three together; no external library is required.
Reduced Motion: Reduces transitions and smooth scrolling when reduced motion is requested.