デザインプレビュー
まず形と大きさを確認。実際の動作は下のLive Demoで試せます。
造形とホバー
サイトでの実寸イメージ
Live Demo
枠内の「動作を試す」を押すか、枠の中をスクロールしてください。右下にボタンが現れ、クリックすると先頭へ戻ります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button aria-label="ページの先頭、舞台の開幕に戻る" class="btt-control btt-2086 btt-hidden" data-btt="" type="button"><span aria-hidden="true" class="cord-rail"><span class="cord-top"></span><span class="cord-strand"></span></span><span class="cord-token"><span class="cord-star">✦</span><b>OPENING</b><small>BACK TO<br/>THE BEGINNING</small></span><span aria-hidden="true" class="cord-meter"></span></button>
CSS
.btt-control{box-sizing:border-box;appearance:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.btt-control:focus-visible{outline:3px solid #e6a643;outline-offset:5px}.btt-hidden{opacity:0;visibility:hidden;pointer-events:none}.btt-visible{opacity:1;visibility:visible;pointer-events:auto} @media(prefers-reduced-motion:reduce){.btt-control,.btt-control *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.btt-2086{position:fixed;right:clamp(17px,3vw,44px);top:17%;z-index:40;width:119px;height:230px;border:0;background:transparent;color:#f2dfc0;opacity:0;transform:translateY(-18px);transition:opacity .3s,transform .3s,visibility .3s}.btt-2086.btt-visible{opacity:1;transform:none}.cord-rail{display:block;position:absolute;top:0;left:47px;width:26px;height:116px}.cord-top{display:block;width:14px;height:14px;border:2px solid #e6c58d;border-radius:50%;margin:auto;background:#3f2832}.cord-strand{display:block;width:2px;height:100px;margin:auto;background:repeating-linear-gradient(#e7ba87 0 5px,#a67657 6px 9px);transform-origin:top;animation:cordSway 5s ease-in-out infinite}.cord-token{position:absolute;top:116px;left:4px;width:111px;height:100px;border:1px solid #d5ac74;border-radius:7px;background:#5a263b;display:flex;align-items:center;flex-direction:column;justify-content:center;box-shadow:0 12px 28px #0007;transform-origin:top;animation:cordSway 5s ease-in-out infinite}.cord-star{font-size:16px;color:#e8b87b;animation:cordGlow 3s ease-in-out infinite}.cord-token b{font:800 13px/1.2 Arial;letter-spacing:.13em;margin:6px 0}.cord-token small{font:700 9px/1.35 Arial;letter-spacing:.08em}.cord-meter{position:absolute;bottom:2px;left:14px;width:90px;height:2px;background:linear-gradient(90deg,#e7be8e calc(var(--progress,0)*100%),#624e4a 0)}.btt-2086:hover .cord-strand{height:110px}.btt-2086:hover .cord-token{transform:translateY(8px)}.btt-2086.is-going .cord-token{background:#936140}.btt-2086:focus-visible{outline-offset:-10px}@keyframes cordSway{0%,100%{rotate:-1deg}50%{rotate:2deg}}@keyframes cordGlow{0%,100%{opacity:.55}50%{opacity:1}}@media(max-width:600px){.btt-2086{right:10px;top:auto;bottom:14px;width:104px;height:170px}.cord-rail{left:44px;height:67px}.cord-strand{height:58px!important}.cord-token{top:66px;left:0;width:104px;height:94px}.cord-meter{width:78px;left:13px}}JavaScript
(()=>{'use strict';const el=document.querySelector('[data-btt]');if(!el)return;const footerOnly=false;const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');let raf=0;function update(){raf=0;const p=Math.max(0,Math.min(1,window.scrollY/Math.max(1,document.documentElement.scrollHeight-window.innerHeight)));if(!footerOnly){const shown=window.scrollY>170;el.classList.toggle('btt-visible',shown);el.classList.toggle('btt-hidden',!shown);el.tabIndex=shown?0:-1;el.setAttribute('aria-hidden',String(!shown));}el.style.setProperty('--progress',p.toFixed(3));const field=el.querySelector('[data-state]');}function onScroll(){if(!raf)raf=requestAnimationFrame(update)}window.addEventListener('scroll',onScroll,{passive:true});window.addEventListener('resize',onScroll,{passive:true});el.addEventListener('click',()=>{el.classList.add('is-going');window.scrollTo({top:0,behavior:reduce.matches?'auto':'smooth'});window.setTimeout(()=>el.classList.remove('is-going'),650)});update()})();How to Use
HTMLのボタンをbody末尾付近へ設置し、CSSを読み込んでください。JavaScriptもdeferで読み込みます。実ページでスクロール後の表示・先頭復帰・スマートフォンでの位置を確認してください。
Use Case
劇場・舞台・公演情報
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タップ位置・余白・文字の収まりに注意。
Browser：Chrome/Edge/Firefox/Safariの現行バージョンを想定。
Reduced Motion：動きを抑制するOS設定にも配慮しています。