RISING BARS — Back to Top
Three slender rising bars paired with a legible TOP label.
Three slender rising bars paired with a legible TOP label.
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-2011 is-hidden" aria-label="Back to the top of the page" title="Back to Top"><span class="art art-bars"><span class="bars"><i></i><i></i><i></i></span><span class="bars-caption">TOP</span></span></button>/* TB-2011 — Back to Top button. */
.tb-btt-2011{--selectedtone:#6f775c;color:#6f775c;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-2011:is(:focus-visible){outline:2px solid currentColor;outline-offset:4px}
.tb-btt-2011.is-hidden{opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none}
.tb-btt-2011 *{box-sizing:border-box}
.tb-btt-2011 .art{display:flex;position:relative;align-items:center;justify-content:center;flex-shrink:0}
.tb-btt-2011 .art-bars{width:62px;height:68px;flex-direction:column}
.tb-btt-2011 .bars{display:flex;align-items:end;gap:7px;height:41px}
.tb-btt-2011 .bars i{width:3px;background:currentColor;display:block;border-radius:1px}
.tb-btt-2011 .bars i:nth-child(1){height:18px;opacity:.5}
.tb-btt-2011 .bars i:nth-child(2){height:29px;opacity:.8}
.tb-btt-2011 .bars i:nth-child(3){height:39px}
.tb-btt-2011 .bars-caption{font-size:9px;letter-spacing:3px;margin-top:9px}
.tb-btt-2011 .bars i{transition:transform .46s cubic-bezier(.2,.83,.2,1)}
.tb-btt-2011:is(:hover,:focus-visible) .bars i{transform:translateY(-9px)}
.tb-btt-2011:is(:hover,:focus-visible) .bars i:nth-child(2){transition-delay:.07s}
.tb-btt-2011:is(:hover,:focus-visible) .bars i:nth-child(3){transition-delay:.14s}
.tb-btt-2011 .art{color:var(--selectedtone,#465b53)}
@media(prefers-reduced-motion:reduce){.tb-btt-2011,.tb-btt-2011 *, .tb-btt-2011 *::before,.tb-btt-2011 *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
/* TB-2011 | Back to Top | No external libraries required. */
(() => {
'use strict';
const button = document.querySelector('.tb-btt-2011');
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
Clean corporate websites and dashboards
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.