First Frame — 最初の写真へ

Source Code

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

<button aria-label="最初の写真へ、ページの先頭に戻る" class="btt-control btt-2090 btt-hidden" data-btt="" type="button"><span aria-hidden="true" class="frame-perfs">▣ ▣ ▣</span><span aria-hidden="true" class="frame-pics"><i></i><i></i><i></i></span><span class="frame-text"><b>FIRST FRAME</b><small>BACK TO START</small></span><span class="frame-count" data-state="">02 / 04</span></button>

 .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-2090{position:fixed;left:clamp(15px,3vw,46px);bottom:25px;z-index:40;width:186px;min-height:132px;background:#171e24;color:#fff5e8;padding:10px 12px;border:1px solid #d0c4b8;box-shadow:0 15px 28px #07131c65;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s,visibility .3s}.btt-2090.btt-visible{opacity:1;transform:none}.frame-perfs{display:block;letter-spacing:14px;white-space:nowrap;font-size:8px;color:#aeaa9d;line-height:1}.frame-pics{display:flex;gap:5px;padding:8px 0}.frame-pics i{width:46px;height:35px;flex:none;background:linear-gradient(135deg,#dbb6a4,#455c66 62%);border:2px solid #fff9ea;transition:transform .25s}.frame-pics i:nth-child(2){background:linear-gradient(45deg,#748b7c,#e3d1ab 52%,#496276)}.frame-pics i:nth-child(3){background:linear-gradient(145deg,#77909d,#d4c3b8 45%,#293b50)}.frame-text{display:flex;align-items:center;justify-content:space-between;gap:8px}.frame-text b{font:700 12px/1.3 Arial;letter-spacing:.07em}.frame-text small{font:700 9px/1.25 Arial;letter-spacing:.05em}.frame-count{display:block;text-align:right;color:#cbbba7;font:700 9px/1.3 monospace;margin-top:5px}.btt-2090:hover{transform:translateY(-7px)}.btt-2090:hover .frame-pics i:first-child{transform:translateY(-4px)}@media(max-width:600px){.btt-2090{left:12px;bottom:18px;width:163px;padding:8px 10px;min-height:123px}.frame-pics i{width:39px;height:32px}.frame-text b{font-size:11px}.frame-text small{font-size:8px}}
/* Field QA / positioning and responsive readability */
@media(max-width:600px){.btt-2090{width:143px;min-height:109px;padding:7px 9px}.frame-pics i{width:33px;height:28px}.frame-pics{gap:4px;padding:7px 0}.frame-text b{font-size:10px}.frame-text small{font-size:7.5px}}

(()=>{'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]');if(field)field.textContent=String(Math.max(2,Math.min(4,Math.floor(p*4)+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設定にも配慮しています。