デザインプレビュー
まず形と大きさを確認。実際の動作は下のLive Demoで試せます。
造形とホバー
サイトでの実寸イメージ
Live Demo
枠内の「動作を試す」を押すか、枠の中をスクロールしてください。右下にボタンが現れ、クリックすると先頭へ戻ります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<!-- TB-2081 / Back to Top: insert before closing body (inside footer for TB-2083) -->
<button class="tb-btt bt2081" type="button" data-backtop aria-label="ページの先頭へ戻る"><span class="umbrella-roof"></span><span class="umbrella-stem"></span><span class="umbrella-foot"></span><span class="umbrella-label">PAGE TOP</span><i class="raindrop one"></i><i class="raindrop two"></i></button>
CSS
/* TB-2081 : 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}
@keyframes rainFall{to{background-position:0 120px}}
.bt2081{position:fixed;right:18px;bottom:20px;width:110px;height:131px;color:#1f5771;background:none}
.umbrella-roof{position:absolute;left:12px;top:11px;width:85px;height:39px;border-radius:95px 95px 0 0;background:#f3bd66;border-bottom:5px solid #d68646;transition:transform .35s}
.umbrella-roof:after{content:"";position:absolute;inset:7px 7px 0;border-radius:80px 80px 0 0;border-top:2px solid #fff5db}
.umbrella-stem{position:absolute;top:49px;left:53px;width:3px;height:43px;background:#265c69}
.umbrella-foot{position:absolute;top:86px;left:53px;width:24px;height:17px;border:3px solid #265c69;border-top:0;border-radius:0 0 25px 25px}
.umbrella-label{position:absolute;left:8px;bottom:0;right:8px;background:#fffef4;border:1px solid #8db5bc;padding:7px 4px;font-size:11px;font-weight:850;letter-spacing:.1em;border-radius:999px}
.raindrop{position:absolute;top:53px;width:5px;height:9px;background:#6bb7cc;border-radius:80% 80% 50% 50%;animation:dropping 1.5s linear infinite}
.raindrop.one{left:24px}
.raindrop.two{right:26px;animation-delay:.6s}
@keyframes dropping{to{transform:translateY(21px);opacity:0}}
.bt2081:hover .umbrella-roof{transform:translateY(-7px) scaleX(1.1)}
.bt2081:hover .umbrella-label{background:#155b73;color:white}
@media (max-width:700px){.bt2081{right:8px;bottom:12px;transform:scale(.83);transform-origin:bottom right}}
@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に配慮。