SPLIT PILL — Back to Top

Source Code

必要なコードをコピーして実装に利用できます。

<button type="button" class="tb-btt-button tb-btt-2025 is-hidden" aria-label="ページの先頭に戻る" 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

HTMLのボタンをbody末尾付近へ設置し、CSSを読み込んでください。JavaScriptもdeferで読み込みます。実ページでスクロール後の表示・先頭復帰・スマートフォンでの位置を確認してください。

Use Case

企業サイト・プロダクト

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タッチ操作・最小48pxのタップ領域・safe-area-insetに対応。右下の他のCTAと重ならないよう設置位置を調整してください。

Browser：外部ライブラリ不要。HTML・CSS・JavaScriptをセットで設置してください。デモは外部Runtimeのiframe内で動作します。

Reduced Motion：prefers-reduced-motionでアニメーション・スクロール動作を軽減します。