デザインプレビュー
まず形と大きさを確認。実際の動作は下のLive Demoで試せます。
造形とホバー
サイトでの実寸イメージ
Live Demo
枠内の「動作を試す」を押すか、枠の中をスクロールしてください。右下にボタンが現れ、クリックすると先頭へ戻ります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button type="button" class="tb-btt-button tb-btt-2012 is-hidden" aria-label="ページの先頭に戻る" title="Back to Top"><span class="art art-flight"><svg viewBox="0 0 100 100" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path class="flight-trace" d="M18 69c10 6 19 3 27-4" fill="none" stroke="currentColor" stroke-opacity=".35" stroke-width="1.8" stroke-dasharray="3 5" stroke-linecap="round"/><g class="flight-plane"><path d="M35 48 82 27 69 74 60 55 35 48Z" fill="#e7eeee" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M60 55 82 27 50 64V53" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M50 64 60 55" fill="none" stroke="currentColor" stroke-width="1.5"/></g></svg><span class="flight-caption">TOP</span></span></button>CSS
/* TB-2012 — Back to Top button. */
.tb-btt-2012{--selectedtone:#547b87;color:#547b87;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-2012:is(:focus-visible){outline:2px solid currentColor;outline-offset:4px}
.tb-btt-2012.is-hidden{opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none}
.tb-btt-2012 *{box-sizing:border-box}
.tb-btt-2012 .art{display:flex;position:relative;align-items:center;justify-content:center;flex-shrink:0}
.tb-btt-2012 .art svg{display:block;overflow:visible;width:100%;height:100%}
.tb-btt-2012 .art-flight{width:83px;height:83px;flex-direction:column}
.tb-btt-2012 .art-flight svg{height:70px}
.tb-btt-2012 .flight-caption{position:absolute;bottom:1px;left:39px;font:9px Arial,sans-serif;letter-spacing:3px}
.tb-btt-2012 .flight-trace{stroke-dasharray:3 5}
.tb-btt-2012 .flight-plane{transform-origin:59px 51px}
.tb-btt-2012:is(:hover,:focus-visible) .flight-plane{animation:tb_btt_2012_flightUp .85s cubic-bezier(.25,.8,.2,1) forwards}
.tb-btt-2012:is(:hover,:focus-visible) .flight-trace{animation:tb_btt_2012_flightTrace .75s ease-out}
@keyframes tb_btt_2012_flightUp{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(7px,-11px) rotate(-5deg)}}
@keyframes tb_btt_2012_flightTrace{0%{stroke-dashoffset:24;opacity:.2}100%{stroke-dashoffset:0;opacity:.65}}
.tb-btt-2012 .art{color:var(--selectedtone,#465b53)}
@media(prefers-reduced-motion:reduce){.tb-btt-2012,.tb-btt-2012 *, .tb-btt-2012 *::before,.tb-btt-2012 *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
JavaScript
/* TB-2012 | Back to Top | No external libraries required. */
(() => {
'use strict';
const button = document.querySelector('.tb-btt-2012');
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でアニメーション・スクロール動作を軽減します。