House Cat Stairs — 猫と階段

Source Code

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

<button class="btt-control btt-cat" data-btt type="button" aria-label="ページの先頭へ戻る"><span class="c-bubble"><strong>ページの先頭へ</strong><small>PAGE TOP</small></span><span class="c-stair-case" aria-hidden="true"><i></i><i></i><i></i><img src="https://tipsblocks.com/wp-content/uploads/tipsblocks-btt-2085-2096/assets/cat-guide.png" class="c-cat-art" alt=""></span><span class="c-return-caption">いっしょに戻ろう <b>↗</b></span></button>

/* Isolated button CSS, extracted from approved original demo */
.btt-control,.btt-control *, .btt-control *::before,.btt-control *::after{box-sizing:border-box}.btt-control{font-family:Arial,"Noto Sans CJK JP","Yu Gothic",sans-serif}
.btt-control:focus-visible{outline:3px solid #f0ad4d;outline-offset:5px}
.btt-cat{position:fixed;z-index:50;right:clamp(8px,2.6vw,38px);bottom:12px;width:152px;height:194px;border:none;background:transparent;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px);transition:opacity .3s,transform .32s,visibility .3s;color:#62423a;padding:0}
.btt-cat.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.c-bubble{position:absolute;z-index:4;top:0;right:5px;min-width:142px;height:62px;padding:10px 8px;display:grid;align-content:center;gap:5px;border-radius:25px 25px 23px 25px;border:1px solid #c58a78;background:#fffaf3;box-shadow:0 7px 18px #7c564c29;text-align:center;transform-origin:85% 90%;animation:c-talk 4s ease-in-out infinite}
.c-bubble:after{content:"";position:absolute;bottom:-6px;right:24px;width:13px;height:13px;background:#fffaf3;border-right:1px solid #c58a78;border-bottom:1px solid #c58a78;transform:rotate(45deg)}
.c-bubble strong{font-size:12px;letter-spacing:.045em}
.c-bubble small{font:700 9px Arial;letter-spacing:.16em;color:#b17464}
.c-stair-case{position:absolute;left:0;right:0;top:60px;height:102px;display:block}
.c-stair-case i{position:absolute;bottom:0;background:#d8b39a;border-top:5px solid #ebccad;box-shadow:inset -5px -4px #a9796440}
.c-stair-case i:nth-child(1){left:8px;width:43px;height:31px}
.c-stair-case i:nth-child(2){left:49px;width:47px;height:55px;background:#cda58e}
.c-stair-case i:nth-child(3){left:94px;width:52px;height:78px;background:#c2947e}
.c-cat-art{position:absolute;left:4px;bottom:12px;width:89px;height:auto;object-fit:contain;transform:translate(calc(var(--step,0)*13px),calc(var(--step,0)*-13px));transition:transform .4s ease;filter:drop-shadow(0 6px 6px #543e352b);animation:c-cat-breathe 3.5s ease-in-out infinite}
.c-return-caption{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.c-return-caption b{color:#bc7665}
.btt-cat:hover .c-cat-art{animation:c-hop .55s ease-in-out infinite alternate}
.btt-cat:hover .c-bubble{background:#f8decf;border-color:#ae7161}
.btt-cat.is-going .c-cat-art{animation:c-run .6s ease-in-out infinite alternate}
@keyframes c-talk{0%,100%{transform:rotate(-1deg)}55%{transform:rotate(2deg)}}
@keyframes c-cat-breathe{0%,100%{filter:drop-shadow(0 6px 6px #543e352b) brightness(1)}50%{filter:drop-shadow(0 7px 7px #543e3535) brightness(1.04)}}
@keyframes c-hop{to{transform:translate(calc(var(--step,0)*13px + 6px),calc(var(--step,0)*-13px - 11px)) rotate(-5deg)}}
@keyframes c-run{to{transform:translate(49px,-45px) scale(.98)}}
@media (max-width:850px){.btt-cat{right:8px;bottom:8px;transform:translateY(18px) scale(.85);transform-origin:right bottom}
.btt-cat.is-visible{transform:scale(.85)}}
.btt-cat{box-sizing:border-box;right:clamp(12px,2.2vw,32px);bottom:18px;width:180px;height:218px;max-width:calc(100vw - 24px)}
.c-bubble{right:4px;top:0;min-width:0;width:156px;height:64px;padding:9px 10px;gap:4px}
.c-bubble strong{font-size:12px;line-height:1.4;letter-spacing:0;white-space:normal}
.c-bubble small{font-size:9px;line-height:1.2}
.c-stair-case{top:66px;height:117px}
.c-stair-case i:nth-child(1){left:11px;width:53px;height:38px}
.c-stair-case i:nth-child(2){left:62px;width:56px;height:67px}
.c-stair-case i:nth-child(3){left:116px;width:56px;height:93px}
.c-cat-art{left:3px;bottom:12px;width:104px}
.c-return-caption{bottom:7px;font-size:11px;white-space:normal;line-height:1.4}
@media (max-width:850px){.btt-cat{width:156px;height:191px;right:10px;bottom:14px;transform:translateY(18px);transform-origin:center center}
.btt-cat.is-visible{transform:none}
.c-bubble{width:146px;right:3px;height:61px;padding:8px 8px}
.c-stair-case{top:61px;height:104px}
.c-stair-case i:nth-child(1){left:8px;width:45px;height:32px}
.c-stair-case i:nth-child(2){left:50px;width:50px;height:57px}
.c-stair-case i:nth-child(3){left:98px;width:51px;height:83px}
.c-cat-art{width:89px;bottom:12px}
.c-return-caption{font-size:10px;bottom:4px}}
@media (max-width:370px){.btt-cat{right:8px;bottom:10px}}

(()=>{'use strict';const el=document.querySelector('[data-btt]');if(!el)return;const reduce=matchMedia('(prefers-reduced-motion: reduce)');let raf=0;function update(){raf=0;const y=scrollY;let p=Math.min(1,Math.max(0,y/Math.max(1,document.documentElement.scrollHeight-innerHeight)));el.classList.toggle('is-visible',y>170);el.tabIndex=y>170?0:-1;el.setAttribute('aria-hidden',String(!(y>170)));el.style.setProperty('--step',Math.min(3,Math.floor(p*3.4)));}addEventListener('scroll',()=>{if(!raf)raf=requestAnimationFrame(update)},{passive:true});addEventListener('resize',update,{passive:true});el.addEventListener('click',()=>{el.classList.add('is-going');window.scrollTo({top:0,behavior:reduce.matches?'auto':'smooth'});setTimeout(()=>el.classList.remove('is-going'),650)});update()})();

How to Use

HTMLのボタンをbody末尾付近へ設置し、CSSを読み込んでください。JavaScriptもdeferで読み込みます。実ページでスクロール後の表示・先頭復帰・スマートフォンでの位置を確認してください。

Use Case

猫と階段

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タップ位置・余白・文字の収まりに注意。

Browser：Chrome/Edge/Firefox/Safariの現行バージョンを想定。

Reduced Motion：動きを抑制するOS設定にも配慮しています。