READING RING — Back to Top

Source Code

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

<div class="tbtt-widget" data-tb-btt-id="2149"><button aria-label="ページの先頭へ戻る" class="tb-btt t2149" title="Back to top" type="button"><span class="gauge"></span><span class="content"><span class="arr">↑</span><strong>TOP</strong><small class="pct">0%</small></span></button></div>

/* TIPSBLOCKS TB-2149 — installable self-contained UI. */
.tbtt-widget{position:fixed;z-index:9999;right:clamp(12px,2vw,30px);bottom:clamp(16px,2.5vw,36px);visibility:hidden;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .36s ease,transform .45s ease,visibility .36s ease}
.tbtt-widget.is-shown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.tbtt-widget--edge{right:0}
.tbtt-widget--footer{position:absolute;right:0;bottom:0;visibility:visible;opacity:1;pointer-events:auto;transform:none}
.tbtt-widget .tb-btt{--ease:cubic-bezier(.22,.67,.18,1);--hover:.85s;font-family:Inter,"Helvetica Neue",Arial,"Noto Sans CJK JP",sans-serif}
.tbtt-widget .tb-btt:focus-visible{outline:3px solid #1593b1;outline-offset:5px}
.tbtt-widget .tb-btt span,.tbtt-widget .tb-btt i,.tbtt-widget .tb-btt b,.tbtt-widget .tb-btt em,.tbtt-widget .tb-btt small,.tbtt-widget .tb-btt strong{pointer-events:none}
@media(max-width:670px){.tbtt-widget:not(.tbtt-widget--footer){right:12px;bottom:18px}.tbtt-widget--edge{right:0!important}.tbtt-widget--footer{right:0}}
@media(prefers-reduced-motion:reduce){.tbtt-widget,.tbtt-widget *,.tbtt-widget *::before,.tbtt-widget *::after{animation:none!important;transition-duration:.01ms!important}}
.tb-btt{appearance:none;border:0;padding:0;line-height:1;isolation:isolate;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;font-synthesis:none;text-rendering:optimizeLegibility;color:#263830;transition:color var(--hover) var(--ease),background var(--hover) var(--ease),border-color var(--hover) var(--ease),box-shadow var(--hover) var(--ease),transform var(--hover) var(--ease);outline-offset:5px}
.tb-btt:focus-visible{outline:3px solid #1593b1;outline-offset:5px}
.tb-btt span,.tb-btt i,.tb-btt b,.tb-btt em,.tb-btt small,.tb-btt strong{pointer-events:none;box-sizing:border-box}
.tb-btt span,.tb-btt i,.tb-btt b,.tb-btt em,.tb-btt small,.tb-btt strong,.tb-btt::before,.tb-btt::after{transition-duration:var(--hover);transition-timing-function:var(--ease)}
.t2149{width:90px;height:90px;border-radius:50%;background:#f0f3ee;color:#244d3f;box-shadow:0 6px 20px #2b594023}.t2149 .gauge{position:absolute;inset:4px;border-radius:50%;background:conic-gradient(#39806c var(--progress,0%),#ced9d0 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}.t2149 .content{display:flex;flex-direction:column;align-items:center;gap:4px}.t2149 .arr{font:300 23px/1 Arial;animation:a2149 9s ease-in-out infinite}.t2149 strong{font:700 10px/1 Arial;letter-spacing:1.5px;padding-left:2px}.t2149 .pct{font:600 9.5px/1 Arial;color:#6b8f80}.t2149:hover .gauge{filter:drop-shadow(0 0 2px #39806c)}.t2149:hover .arr{color:#a56a49}@keyframes a2149{0%,18%,100%{transform:translateY(0)}37%{transform:translateY(-4px)}55%{transform:translateY(0)}}
.t2149 .arr{animation:a2149v5 9.2s cubic-bezier(.25,.67,.25,1) infinite}
@keyframes a2149v5{0%,12%,100%{transform:translateY(1px);opacity:.72}37%,61%{transform:translateY(-6px);opacity:1}80%{transform:translateY(1px);opacity:.72}}
.t2149:hover{background:#deede3;box-shadow:0 8px 24px #2b594032}

(()=>{'use strict';const host=document.querySelector('.tbtt-widget[data-tb-btt-id="2149"]');if(!host)return;const btn=host.querySelector('.tb-btt');const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');function update(){const y=Math.max(0,window.scrollY||document.documentElement.scrollTop||0);if(!host.classList.contains('tbtt-widget--footer'))host.classList.toggle('is-shown',y>200);const all=Math.max(1,document.documentElement.scrollHeight-window.innerHeight);const pct=Math.round(Math.min(100,100*y/all));btn.style.setProperty('--progress',pct+'%');const pctNode=btn.querySelector('.pct');if(pctNode)pctNode.textContent=pct+'%';}btn.addEventListener('click',()=>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 / Safari / Firefoxを想定

Reduced Motion：prefers-reduced-motion: reduce に配慮し、常時の動きとスムーズスクロールを停止。