Origin Point — 原点へ戻る

Source Code

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

<button aria-label="ページ先頭の原点へ戻る" class="btt-control btt-2091 btt-hidden" data-btt="" type="button"><span class="origin-label">RETURN TO <b>ORIGIN</b></span><span aria-hidden="true" class="origin-axes"><i class="origin-y"></i><i class="origin-x"></i><i class="origin-point"></i></span><span class="origin-readout">Y <b data-state="">042</b><small>TOP = 000</small></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-2091{position:fixed;right:clamp(15px,2vw,36px);top:50%;z-index:40;width:130px;height:252px;transform:translate(16px,-50%);opacity:0;border:1px solid #467281;background:#0d2230ee;color:#bce3ec;padding:12px 12px 14px;display:flex;flex-direction:column;align-items:start;text-align:left;box-shadow:0 15px 38px #0006;transition:opacity .3s,transform .3s,visibility .3s}.btt-2091.btt-visible{opacity:1;transform:translate(0,-50%)}.origin-label{font:700 10px/1.5 monospace;letter-spacing:.09em}.origin-label b{display:block;font:800 18px/1.2 Arial;letter-spacing:.09em;color:#eeffff}.origin-axes{width:100%;height:125px;margin:12px 0 9px;display:block;position:relative;background:linear-gradient(transparent 96%,#3c5866 0),linear-gradient(90deg,transparent 96%,#3c5866 0);background-size:20px 20px;border-left:1px solid #9fd4da;border-bottom:1px solid #9fd4da}.origin-y{position:absolute;left:0;top:0;bottom:0;width:1px;background:#82cad6}.origin-x{position:absolute;bottom:0;left:0;right:0;height:1px;background:#82cad6}.origin-point{position:absolute;left:calc(var(--progress,0)*80%);bottom:calc(var(--progress,0)*80%);width:13px;height:13px;border-radius:50%;background:#95e8d8;box-shadow:0 0 0 5px #9fe2cb28,0 0 0 0 #9fe2cb55;animation:originPulse 3s ease-out infinite}.origin-readout{font:800 11px/1.3 monospace;display:block}.origin-readout b{font-size:19px}.origin-readout small{display:block;margin-top:3px;font-size:9px;opacity:.8}.btt-2091:hover .origin-point{background:#fff;box-shadow:0 0 0 10px #9fe2cb20}.btt-2091.is-going .origin-point{transition:all .4s;left:0;bottom:0}@keyframes originPulse{0%,100%{box-shadow:0 0 0 4px #9fe2cb2d}50%{box-shadow:0 0 0 9px #9fe2cb10}}@media(max-width:650px){.btt-2091{top:auto;bottom:15px;right:12px;width:116px;height:197px;transform:translateY(15px);padding:10px}.btt-2091.btt-visible{transform:none}.origin-axes{height:87px;margin:7px 0}.origin-label b{font-size:16px}.origin-readout b{font-size:15px}}
/* Field QA / positioning and responsive readability */
@media(max-width:650px){.btt-2091{width:112px;height:157px;right:10px;bottom:14px;padding:8px}.origin-label{font-size:8px}.origin-label b{font-size:14px}.origin-axes{height:62px;margin:5px 0}.origin-readout{font-size:9px}.origin-readout b{font-size:13px}.origin-readout small{font-size:8px}}

(()=>{'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.round(p*100)).padStart(3,'0');}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設定にも配慮しています。