デザインプレビュー
まず形と大きさを確認。実際の動作は下のLive Demoで試せます。
造形とホバー
サイトでの実寸イメージ
Live Demo
枠内の「動作を試す」を押すか、枠の中をスクロールしてください。右下にボタンが現れ、クリックすると先頭へ戻ります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<!-- TB-2060 / Everyday Pill | paste before closing body -->
<button class="backtop tb-btt-button w2060" type="button" aria-label="Back to top"><span class="w60icon">↑</span><span class="w60label">BACK TO TOP</span></button>
CSS
/* TB-2060 / Everyday Pill */
.backtop{box-sizing:border-box;position:fixed;z-index:50;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);text-align:center;transition:opacity .24s, transform .28s, visibility .24s}.backtop.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.backtop.w2055.is-visible{transform:translate(-50%,0)}.backtop:focus-visible{outline:3px solid #e7ab4c;outline-offset:4px}
.w2060{right:25px;bottom:26px;min-width:152px;height:49px;border:1px solid #477e75;border-radius:28px;background:#fffefb;color:#285e57;display:flex;gap:11px;align-items:center;padding:5px 16px 5px 6px;box-shadow:0 6px 20px #1c57471a;transition:background .25s,color .25s,box-shadow .25s}.w60icon{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:#316d65;color:white;display:grid;place-items:center;font:400 22px/1 Georgia,serif;transition:transform .25s}.w60label{white-space:nowrap;font:700 10px Arial,sans-serif;letter-spacing:.1em}.w2060:hover{background:#e7f0e9;box-shadow:0 8px 25px #1c57472b}.w2060:hover .w60icon{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* POLISH PASS 2026-10-18: alignment, tactile size, emphasis & individual character */
.backtop{isolation:isolate;-webkit-tap-highlight-color:transparent;}
.backtop:focus-visible{outline:3px solid #f0af42;outline-offset:4px;}
@media(prefers-reduced-motion:reduce){.backtop,.backtop *{transition-duration:.01ms!important;animation-duration:.01ms!important}}
.w2060{right:clamp(20px,3vw,48px);bottom:clamp(26px,5vh,57px);min-width:167px;height:52px;padding:6px 18px 6px 6px;gap:13px;border-radius:30px;box-shadow:0 5px 0 #c6ddd3,0 9px 25px #235a4926;}
.w2060 .w60label{font-size:11px;letter-spacing:.07em;white-space:nowrap;}
.w2060:hover{background:#e7f2e9;box-shadow:0 3px 0 #c6ddd3,0 7px 20px #235a4940;transform:translateY(2px)}
@media(max-width:650px){.w2060{right:15px;bottom:24px;min-width:151px;height:49px}}
JavaScript
(()=>{'use strict';const button=document.querySelector('.backtop');if(!button)return;const footerOnly=button.classList.contains('footer-backtop');const reduced=matchMedia('(prefers-reduced-motion: reduce)');let scheduled=false;function update(){scheduled=false;if(footerOnly)return;const shown=window.scrollY>160;button.classList.toggle('is-visible',shown);button.classList.toggle('is-hidden',!shown);button.tabIndex=shown?0:-1;button.setAttribute('aria-hidden',String(!shown));if(button.classList.contains('w2056')){const max=Math.max(1,document.documentElement.scrollHeight-innerHeight);button.style.setProperty('--progress',(Math.round(Math.min(100,scrollY/max*100)))+'%');}}function onScroll(){if(!scheduled){scheduled=true;requestAnimationFrame(update)}}button.addEventListener('click',()=>window.scrollTo({top:0,behavior:reduced.matches?'instant':'smooth'}));addEventListener('scroll',onScroll,{passive:true});addEventListener('resize',onScroll,{passive:true});update();})();How to Use
HTMLのボタンをbody末尾付近へ設置し、CSSを読み込んでください。JavaScriptもdeferで読み込みます。実ページでスクロール後の表示・先頭復帰・スマートフォンでの位置を確認してください。
Use Case
医療・サービス業・日常的なコーポレートサイト。
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：端末幅ごとにボタンの位置とタップ領域を確認してください。
Browser：モダンブラウザ向け。実際のページでのレイアウトを検証してください。
Reduced Motion：prefers-reduced-motion 設定によりアニメーションを抑制します。