Receipt / Index Card — Back to Top

Source Code

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

<div class="tbtt-2192" data-tb-btt-id="2192"><button aria-label="ページの先頭へ戻る" class="btt btt-2192" type="button"><span class="notch notch-l"></span><span class="notch notch-r"></span><span class="meta">RETURN / 001</span><span class="baseline"><b>TOP</b><svg aria-hidden="true" class="arrow" fill="none" viewbox="0 0 40 40"><path d="M9 31 31 9M15 9h16v16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.3"></path></svg></span><i class="dash"></i></button></div>

.tbtt-2192{position:fixed;z-index:2147480000;right:clamp(12px,2vw,28px);bottom:clamp(16px,2.2vw,30px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity .4s ease,visibility .4s,transform .4s ease;box-sizing:border-box} 
.tbtt-2192.is-shown{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.tbtt-2192 .btt{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:0!important}
.tbtt-2192 button{font:inherit}
.tbtt-2192 button:focus-visible{outline:3px solid #1276ad;outline-offset:4px}
@media(max-width:640px){.tbtt-2192:not(.tbtt-2192--footer){right:12px;bottom:14px;transform-origin:bottom right;scale:.82}}
@media(prefers-reduced-motion:reduce){.tbtt-2192,.tbtt-2192 *, .tbtt-2192 *::before,.tbtt-2192 *::after{animation:none!important;transition-duration:.01ms!important}}

.tbtt-2192 .btt{--enter:0;position:absolute;z-index:3;right:23px;bottom:22px;appearance:none;border:0;margin:0;padding:0;cursor:pointer;display:block;overflow:visible;text-decoration:none;line-height:1;color:inherit;touch-action:manipulation;transition:transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .8s ease,background-color .8s ease, border-color .8s ease, color .8s ease;transform-origin:center;user-select:none;outline-offset:5px}
.tbtt-2192 .btt:focus-visible{outline:3px solid #257ae5}
.tbtt-2192 .btt svg.arrow{display:block;width:30px;height:30px}
.tbtt-2192 .btt>*, .tbtt-2192 .btt span, .tbtt-2192 .btt i{pointer-events:none}
.tbtt-2192 .btt:hover{transition-duration:.82s}
.tbtt-2192 .btt:hover .arrow{transition:transform .85s cubic-bezier(.18,.8,.15,1)}
.tbtt-2192 .btt .arrow{transition:transform .85s cubic-bezier(.18,.8,.15,1)}
.tbtt-2192 .btt-2192{width:150px;height:109px;background:#fffbf2;border:1px solid #b8ab91;color:#45392d;text-align:left;padding:16px 15px;box-shadow:7px 7px 0 #8a745d30}
.tbtt-2192 .btt-2192 .notch{position:absolute;bottom:-1px;width:8px;height:8px;background:var(--bg);transform:rotate(45deg)}
.tbtt-2192 .btt-2192 .notch-l{left:-5px}
.tbtt-2192 .btt-2192 .notch-r{right:-5px}
.tbtt-2192 .btt-2192 .meta{font:500 9px "Courier New",monospace;letter-spacing:.05em;display:block;padding-bottom:9px;border-bottom:1px solid #d0bd9f}
.tbtt-2192 .btt-2192 .baseline{position:absolute;bottom:18px;left:15px;right:15px;display:flex;align-items:center;justify-content:space-between}
.tbtt-2192 .btt-2192 .baseline b{font:700 27px Georgia,serif}
.tbtt-2192 .btt-2192 .baseline svg{height:31px;width:31px}
.tbtt-2192 .btt-2192 .dash{position:absolute;bottom:5px;left:15px;background:#aa5d3a;height:2px;width:38px;animation:rule-breathe 7s ease-in-out infinite}
.tbtt-2192 .btt-2192:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 #8a745d50}
.tbtt-2192 .btt-2192:hover svg{transform:translate(4px,-4px)}
@keyframes rise{0%,15%,100%{transform:translateY(0)}55%{transform:translateY(-6px)}}
@keyframes linewalk{0%,12%{transform:translateX(-105%)}55%,76%{transform:translateX(105%)}100%{transform:translateX(105%)}}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes gentle-tilt{0%,13%,100%{transform:rotate(-5deg)}42%,60%{transform:rotate(4deg)}}
@keyframes dimmove{0%,100%{opacity:.32;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes marker-move{0%,12%,100%{top:0}55%,75%{top:56px}}
@keyframes rotate-slow{to{transform:rotate(360deg)}}
@keyframes seam-shift{to{background-position:64px 0}}
@keyframes editorial-rule{0%,16%,100%{width:68px}55%,74%{width:119px}}
@keyframes bracket-tint{0%,25%,100%{border-color:#bd4e36}53%{border-color:#273e36}}
@keyframes instrument-ring{0%,100%{box-shadow:0 3px 17px #0002}50%{box-shadow:0 3px 17px #bb683c68}}
@keyframes rule-breathe{0%,100%{width:33px}55%{width:110px}}
@keyframes stagger-rise{0%,24%,100%{transform:translateY(5px) skewX(-17deg)}52%{transform:translateY(-6px) skewX(-17deg)}}
@keyframes ridge-move{0%,100%{translate:0 0}45%{translate:0 -5px}}
@keyframes banner-lane{0%,100%{left:0}50%{left:65%}}
@keyframes marquee{to{transform:translateX(-33%)}}
@keyframes spine-grow{0%,100%{transform:scaleY(.33)}60%{transform:scaleY(1)}}
@keyframes dim-motor{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes railgrow{0%,100%{transform:scaleX(.25)}60%{transform:scaleX(1)}}

/* TIPSBLOCKS TB-2192 standalone Back to Top. */
(()=>{'use strict';
 const root=document.querySelector('.tbtt-2192[data-tb-btt-id="2192"]'); if(!root)return;
 const btn=root.querySelector('.btt');if(!btn)return;
 const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');
 function update(){
  const y=Math.max(0,window.scrollY||document.documentElement.scrollTop||0);
  root.classList.toggle('is-shown',y>180);
  const total=Math.max(1,document.documentElement.scrollHeight-window.innerHeight);
  const percent=Math.round(Math.max(0,Math.min(100,100*y/total)));
  btn.style.setProperty('--progress-deg',percent*3.6+'deg');
  const value=btn.querySelector('.value');
  if(value && btn.classList.contains('btt-2186'))value.innerHTML=String(percent).padStart(2,'0')+'<span>%</span>';
 }
 btn.addEventListener('click',function(event){event.preventDefault();window.scrollTo({top:0,behavior:reduce.matches?'auto':'smooth'});});
 window.addEventListener('scroll',update,{passive:true});window.addEventListener('resize',update,{passive:true});update();
})();

How to Use

HTMLのボタンをbody末尾付近へ設置し、CSSを読み込んでください。JavaScriptもdeferで読み込みます。実ページでスクロール後の表示・先頭復帰・スマートフォンでの位置を確認してください。

Use Case

さまざまなWebサイトの補助ナビゲーションとして利用できます。

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：モバイル表示での幅とタップ位置を調整してください。

Browser：Chrome、Edge、Firefox、Safariの現行版を想定。

Reduced Motion：prefers-reduced-motionに従ってアニメーションを抑制します。