SPLIT PILL — Back to Top

Source Code

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

<button type="button" class="tb-btt-button tb-btt-2025 is-hidden" aria-label="Back to the top of the page" title="Back to Top"><span class="art a25"><span class="a25-icon"><span class="a25-window"><span class="a25-track"><svg viewBox="0 0 100 100" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="M50 73V27M36 41 50 27 64 41" stroke="currentColor" stroke-width="5.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg><svg viewBox="0 0 100 100" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><path d="M50 73V27M36 41 50 27 64 41" stroke="currentColor" stroke-width="5.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></span></span></span><span class="a25-copy"><b>PAGE TOP</b><i></i></span></span></button>

/* TB-2025 — Back to Top button. */
.tb-btt-2025{--selectedtone:#375d52;color:#375d52;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-2025:is(:focus-visible){outline:2px solid currentColor;outline-offset:4px}
.tb-btt-2025.is-hidden{opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none}
.tb-btt-2025 *{box-sizing:border-box}
.tb-btt-2025 .art{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tb-btt-2025 .art svg{display:block;width:100%;height:100%;overflow:visible}
.tb-btt-2025 .art{color:var(--selectedtone)}
.tb-btt-2025 .a25{width:148px;height:49px;background:#f7f4ed;border:1px solid #b6c4ba;border-radius:25px;overflow:hidden;justify-content:flex-start;box-shadow:0 3px 10px #344b3e0c}
.tb-btt-2025 .a25-icon{height:49px;width:53px;background:#385d51;display:grid;place-items:center;flex:none}
.tb-btt-2025 .a25-window{height:34px;width:34px;position:relative;overflow:hidden;color:white}
.tb-btt-2025 .a25-track{position:absolute;top:0;left:0;display:flex;flex-direction:column;transition:transform .52s cubic-bezier(.25,.85,.23,1)}
.tb-btt-2025 .a25-track svg{height:34px;width:34px;flex:none}
.tb-btt-2025 .a25-copy{display:flex;flex-direction:column;gap:6px;margin:0 auto;color:#385d51;font:700 10px Arial,sans-serif;letter-spacing:1.2px;white-space:nowrap}
.tb-btt-2025 .a25-copy i{width:51px;height:1.5px;background:currentColor;opacity:.4;transition:transform .5s;transform-origin:left}
.tb-btt-2025:is(:hover,:focus-visible) .a25-track{transform:translateY(-34px)}
.tb-btt-2025:is(:hover,:focus-visible) .a25-copy i{transform:scaleX(1.35)}
@media(prefers-reduced-motion:reduce){.tb-btt-2025,.tb-btt-2025 *, .tb-btt-2025 *::before,.tb-btt-2025 *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}

/* TB-2025 | Back to Top | No external libraries required. */
(() => {
  'use strict';

  const button = document.querySelector('.tb-btt-2025');
  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 the CSS, and include JavaScript using defer. Test scrolling, returning to the top, and positioning on mobile.

Use Case

Corporate and service landing pages

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.