デザインプレビュー
まず形と大きさを確認。実際の動作は下のLive Demoで試せます。
造形とホバー
サイトでの実寸イメージ
Live Demo
枠内の「動作を試す」を押すか、枠の中をスクロールしてください。右下にボタンが現れ、クリックすると先頭へ戻ります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<!-- TB-2070 / Soft Current / 変形する水滴 | paste before the closing body tag (inside the footer for TB-2069) -->
<button aria-label="ページの先頭へ戻る" class="btt blob tb-btt-2070" type="button"><span class="blob-water">◌</span><span class="blob-label">return</span></button>
CSS
/* 2070 / production button rules only */
.tb-btt-2070{box-sizing:border-box;font:inherit;cursor:pointer}.tb-btt-2070 :is(span,i,em,b,small,img){box-sizing:border-box}
.btt.tb-btt-2070{position:fixed;z-index:90;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease,transform .35s ease}.btt.tb-btt-2070:focus-visible{outline:3px solid #f0af43;outline-offset:5px}.tb-btt-2070 .blob{right:22px;bottom:24px;width:88px;height:87px;border-radius:56% 44% 31% 69% / 44% 32% 68% 56%;background:linear-gradient(140deg,#8dc9b5,#a7bde4 70%,#e8c1d9);box-shadow:0 13px 24px #2b7d6b35;color:#143e3b;display:grid;place-items:center;animation:tb-btt-2070-flowBlob 7s ease-in-out infinite;transition:width .5s,height .5s,opacity .28s,visibility .28s,background .5s}.tb-btt-2070 .blob-water{position:absolute;top:2px;left:26px;font:400 49px/1 Georgia,serif;opacity:.5}.tb-btt-2070 .blob-label{font:italic 600 15px/1 Georgia,serif;letter-spacing:.02em}.tb-btt-2070 .blob:hover{width:142px;height:72px;border-radius:999px;background:linear-gradient(100deg,#95dbbf,#c9c4f1);animation:none}@media (max-width:600px){.tb-btt-2070 .blob{right:14px;bottom:18px;width:72px;height:72px}.tb-btt-2070 .blob:hover{width:115px;height:62px}.tb-btt-2070 .blob-water{left:18px}}
@keyframes tb-btt-2070-heroMorph{50%{border-radius:35% 65% 45% 55%;transform:translateY(25px) rotate(10deg)}}
@keyframes tb-btt-2070-flowBlob{0%,100%{border-radius:56% 44% 31% 69% / 44% 32% 68% 56%;transform:translateY(0)}50%{border-radius:32% 68% 55% 45% / 62% 50% 50% 38%;transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.tb-btt-2070,.tb-btt-2070 *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
JavaScript
(()=>{'use strict';const target=document.querySelector('.btt, .footer-return');if(!target)return;const isFooter=target.classList.contains('footer-return');const reduced=matchMedia('(prefers-reduced-motion: reduce)');let active=false;const update=()=>{const y=window.scrollY;const p=Math.max(0,Math.min(1,y/Math.max(1,document.documentElement.scrollHeight-innerHeight)));if(!isFooter){const visible=y>160;target.classList.toggle('is-visible',visible);target.setAttribute('aria-hidden',String(!visible));target.tabIndex=visible?0:-1;}target.style.setProperty('--pct',p.toFixed(3));const txt=target.querySelector('[data-progress]');if(txt)txt.textContent=String(Math.round(100*p)).padStart(2,'0')+'%';};const scroll=()=>{if(active)return;active=true;requestAnimationFrame(()=>{active=false;update()})};target.addEventListener('click',()=>window.scrollTo({top:0,behavior:reduced.matches?'instant':'smooth'}));addEventListener('scroll',scroll,{passive:true});addEventListener('resize',scroll,{passive:true});update();})();
How to Use
HTMLのボタンをbody末尾付近へ設置し、CSSを読み込んでください。JavaScriptもdeferで読み込みます。実ページでスクロール後の表示・先頭復帰・スマートフォンでの位置を確認してください。
Use Case
ao オーガニックケアなど、サイト全体の世界観と一体になったページトップ導線。
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：390px幅も含むモバイル表示を確認してください。
Browser：Chrome・Edge・Firefox・Safari等の現行ブラウザを対象とします。
Reduced Motion：prefers-reduced-motion環境ではCSSアニメーションを抑制します。