デザインプレビュー
まず形と大きさを確認。実際の動作は下のLive Demoで試せます。
造形とホバー
サイトでの実寸イメージ
Live Demo
枠内の「動作を試す」を押すか、枠の中をスクロールしてください。右下にボタンが現れ、クリックすると先頭へ戻ります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button aria-label="色見本の先頭、ページのトップへ戻る" class="btt-control btt-2094 btt-hidden" data-btt="" type="button"><span aria-hidden="true" class="swatch-group"><i class="swatch s1"></i><i class="swatch s2"></i><i class="swatch s3"></i><i class="swatch s4"></i></span><span class="palette-label"><b>01 / FIRST COLOR</b><small>BACK TO TOP</small></span><span class="palette-counter" data-state="">03 / 04</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-2094{position:fixed;left:clamp(14px,3vw,46px);bottom:27px;z-index:40;width:196px;height:118px;border:0;border-radius:7px;background:#faf9f4;color:#1f3432;box-shadow:0 12px 35px #0003;padding:13px 14px;display:flex;flex-direction:column;gap:9px;align-items:stretch;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s,visibility .3s}.btt-2094.btt-visible{opacity:1;transform:none}.swatch-group{display:flex;gap:5px;height:43px;width:100%;transition:transform .3s}.swatch{display:block;width:25%;border-radius:2px;background:#cf745a;transition:transform .35s}.swatch.s2{background:#e6bd80}.swatch.s3{background:#7b9997}.swatch.s4{background:#283e51}.swatch.is-selected{outline:2px solid #171f21;outline-offset:2px}.palette-label{display:flex;flex-direction:column;align-items:start;gap:5px}.palette-label b{font:800 12px/1 Arial;letter-spacing:.08em}.palette-label small{font:800 10px/1 Arial;letter-spacing:.12em}.palette-counter{position:absolute;right:12px;bottom:13px;font:700 10px/1 monospace;color:#667573}.btt-2094:hover{transform:translateY(-7px)}.btt-2094:hover .swatch-group i:nth-child(1){transform:translateY(-5px)}.btt-2094:hover .swatch-group i:nth-child(3){transform:translateY(4px)}@media(max-width:600px){.btt-2094{left:12px;bottom:17px;width:175px;height:110px;padding:10px 11px}.swatch-group{height:40px}.palette-label b{font-size:11px}.palette-label small{font-size:9px}}
/* Field QA / positioning and responsive readability */
@media(max-width:600px){.btt-2094{width:162px;height:97px;left:10px;bottom:14px;padding:8px 10px;gap:5px}.swatch-group{height:36px}.palette-label{gap:3px}.palette-label b{font-size:10px}.palette-label small{font-size:8.5px}.palette-counter{font-size:8px;right:10px;bottom:10px}}
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]');const i=Math.min(3,Math.floor(p*4));el.querySelectorAll('.swatch').forEach((n,k)=>n.classList.toggle('is-selected',k===i));if(field)field.textContent=String(i+1).padStart(2,'0')+' / 04';}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設定にも配慮しています。