デザインプレビュー
まず形と大きさを確認。実際の動作は下のLive Demoで試せます。
造形とホバー
サイトでの実寸イメージ
Live Demo
枠内の「動作を試す」を押すか、枠の中をスクロールしてください。右下にボタンが現れ、クリックすると先頭へ戻ります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<!-- TB-2079 / Back to Top: insert before closing body (inside footer for TB-2083) -->
<button class="tb-btt bt2079" type="button" data-backtop aria-label="作品のはじまり、ページ先頭へ戻る"><span class="clay-wheel"><i></i></span><span class="clay-label">ページの最初へ</span></button>
CSS
/* TB-2079 : paste only this CSS into the target page. */
.tb-btt{border:0;cursor:pointer;z-index:30;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .35s,opacity .3s,background .3s,color .3s,box-shadow .3s;pointer-events:none;opacity:0;visibility:hidden}.tb-btt.is-visible{pointer-events:auto;opacity:1;visibility:visible}.tb-btt:focus-visible{outline:3px solid #f9af4b;outline-offset:5px}.only-at-end{opacity:1;visibility:visible;pointer-events:auto}
.bt2079{position:fixed;right:22px;bottom:22px;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 9px;background:#f7f2e8;color:#5c493d;border:1px solid #bca78e;border-radius:999px;box-shadow:0 10px 22px #48362933}
.clay-wheel{width:53px;height:53px;border:3px solid #907b61;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#f7f2e8 0 5px,#d7c6ae 6px 7px);animation:pottery 8s linear infinite}
.clay-wheel i{width:13px;height:13px;background:#9d6652;border-radius:50%}
.clay-label{font:normal 13px "Yu Mincho",serif;white-space:nowrap}
@keyframes pottery{to{transform:rotate(360deg)}}
.bt2079:hover{background:#e9d7c4;transform:translateY(-4px)}
@media (max-width:700px){.bt2079{right:10px;bottom:13px}.clay-wheel{height:45px;width:45px}}
@media(prefers-reduced-motion:reduce){.tb-btt,.tb-btt *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
JavaScript
(()=>{'use strict';const control=document.querySelector('[data-backtop]');if(!control)return;const reduced=matchMedia('(prefers-reduced-motion: reduce)');const footer=control.classList.contains('only-at-end');let busy=false;function refresh(){busy=false;const max=Math.max(1,document.documentElement.scrollHeight-window.innerHeight);const p=Math.min(1,scrollY/max);document.documentElement.style.setProperty('--page-progress',p.toFixed(4));if(!footer){const show=scrollY>145;control.classList.toggle('is-visible',show);control.tabIndex=show?0:-1;control.setAttribute('aria-hidden',String(!show));}const number=document.querySelector('[data-progress-number]');if(number)number.textContent=Math.round(p*100)+'%';}function onscroll(){if(!busy){busy=true;requestAnimationFrame(refresh)}}addEventListener('scroll',onscroll,{passive:true});addEventListener('resize',onscroll,{passive:true});control.addEventListener('click',()=>window.scrollTo({top:0,behavior:reduced.matches?'instant':'smooth'}));refresh();})();
How to Use
HTMLのボタンをbody末尾付近へ設置し、CSSを読み込んでください。JavaScriptもdeferで読み込みます。実ページでスクロール後の表示・先頭復帰・スマートフォンでの位置を確認してください。
Use Case
小さな器・陶芸工房
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：モバイル幅でもクリック・タップ可能な大きさを確認。
Browser：現行Chrome・Firefox・Edge・Safariを想定。
Reduced Motion：prefers-reduced-motionに配慮。