Elevator Lobby — ロビーに戻る

Source Code

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

<button class="btt-control btt-hotel" data-btt type="button" aria-label="ページの先頭へ戻る・Back to Lobby"><span class="h-panel-top">MAISON AOBA <i class="h-status" aria-hidden="true"></i></span><span class="h-floor-current" aria-hidden="true">05</span><span class="h-floor-line"><i aria-hidden="true"></i><span>FLOOR</span></span><span class="h-lobby-destination"><b>1F</b><span>LOBBY</span></span><span class="h-back-label">BACK TO<br>LOBBY <small>PAGE TOP</small></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-hotel{position:fixed;z-index:30;right:clamp(15px,2.3vw,36px);top:50%;width:88px;min-height:276px;transform:translate(18px,-50%);opacity:0;visibility:hidden;pointer-events:none;cursor:pointer;border:1px solid #746b55;border-radius:14px;background:linear-gradient(125deg,#252b27,#111917);color:#e4d8bb;box-shadow:0 16px 45px rgba(0,0,0,.35),inset 0 0 0 3px #303c36;padding:14px 9px;display:flex;flex-direction:column;align-items:center;gap:7px;transition:opacity .3s,transform .35s,visibility .3s,box-shadow .35s}
.btt-hotel.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%)}
.h-panel-top{font:600 6.8px Arial;letter-spacing:.11em;white-space:nowrap;border-bottom:1px solid #5e6258;padding-bottom:11px;width:100%;text-align:center}
.h-status{display:inline-block;width:4px;height:4px;border-radius:100%;background:#dcc081;box-shadow:0 0 7px #ecd497;animation:h-glow 3s ease-in-out infinite;margin-left:3px}
.h-floor-current{font:400 48px/.94 Georgia,serif;color:#eee1bd;margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-.09em}
.h-floor-line{display:flex;align-items:center;gap:6px;font:700 7px Arial;letter-spacing:.13em;color:#b2a58c}
.h-floor-line i{width:18px;height:1px;background:#b2a58c}
.h-lobby-destination{background:#dbc096;color:#223027;border-radius:4px;width:100%;padding:8px 2px;display:grid;place-items:center;box-shadow:0 0 15px rgba(221,184,118,.24);transition:background .3s}
.h-lobby-destination b{font:700 22px/1 Georgia,serif}
.h-lobby-destination span{font:700 8px/1.3 Arial;letter-spacing:.14em}
.h-back-label{display:block;text-align:center;font:700 9px/1.15 Arial,sans-serif;letter-spacing:.08em;margin-top:auto;color:#efe6cd}
.h-back-label small{display:block;margin-top:5px;font-size:7px;letter-spacing:.08em;color:#b2ab99}
.btt-hotel:hover{box-shadow:0 18px 55px rgba(0,0,0,.5),0 0 0 2px rgba(233,201,148,.48)}
.btt-hotel:hover .h-lobby-destination{background:#f4d9a7}
.btt-hotel.is-going .h-floor-current{color:#f6d5a0}
@keyframes h-glow{0%,100%{opacity:.4}50%{opacity:1}}
@media (max-width:900px){.btt-hotel{top:auto;bottom:20px;width:76px;min-height:190px;right:15px;transform:translateY(16px);padding:10px 7px}
.btt-hotel.is-visible{transform:none}
.h-floor-current{font-size:31px;margin-top:0}
.h-panel-top{font-size:5.7px;padding-bottom:5px}
.h-back-label{font-size:8px}
.h-lobby-destination{padding:5px}
.h-lobby-destination b{font-size:18px}
.h-back-label small{font-size:6px}}
.btt-hotel{box-sizing:border-box;max-height:calc(100dvh - 28px);justify-content:space-between;gap:8px}
.h-panel-top{white-space:normal;overflow-wrap:normal;line-height:1.25;min-height:16px;display:flex;justify-content:center;align-items:center;gap:4px}
.h-panel-top .h-status{flex:none;margin-left:0}
.h-back-label{line-height:1.3;white-space:normal;overflow-wrap:normal}
@media  (max-width:900px){.btt-hotel{width:90px;min-height:212px;padding:10px 8px;right:12px;bottom:16px;gap:6px}
.h-panel-top{font-size:7.3px;letter-spacing:.035em;padding-bottom:7px}
.h-floor-current{font-size:35px}
.h-lobby-destination b{font-size:21px}
.h-lobby-destination span{font-size:9px}
.h-back-label{font-size:9px;letter-spacing:.045em}
.h-back-label small{font-size:8px;letter-spacing:.04em}}
@media (max-height:450px){.btt-hotel{width:80px;min-height:178px;padding:6px;gap:3px}
.h-floor-current{font-size:27px}
.h-panel-top{font-size:6px;padding-bottom:3px}
.h-back-label{font-size:8px}}

(()=>{'use strict';const el=document.querySelector('[data-btt]');if(!el)return;const cur=el.querySelector('.h-floor-current');const reduce=matchMedia('(prefers-reduced-motion: reduce)');let raf=0;function update(){raf=0;const y=scrollY;let p=y/Math.max(1,document.documentElement.scrollHeight-innerHeight);p=Math.min(1,Math.max(0,p));el.classList.toggle('is-visible',y>170);el.tabIndex=y>170?0:-1;el.setAttribute('aria-hidden',String(!(y>170)));const floor=Math.min(9,Math.max(1,Math.ceil(1+p*8)));cur.textContent=String(floor).padStart(2,'0');}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'),1100)});update()})();

How to Use

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

Use Case

ホテルの階数案内

Technical Notes

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

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

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

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