デザインプレビュー
まず形と大きさを確認。実際の動作は下のLive Demoで試せます。
造形とホバー
サイトでの実寸イメージ
Live Demo
枠内の「動作を試す」を押すか、枠の中をスクロールしてください。右下にボタンが現れ、クリックすると先頭へ戻ります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button aria-label="ページの先頭、手紙の書き出しへ戻る" class="btt-control btt-2096" data-btt="" type="button"><span aria-hidden="true" class="letter-envelope"><i></i></span><span class="letter-ink"><small>RETURN TO THE BEGINNING</small><b>書き出しへ</b><em>Back to top</em></span><span aria-hidden="true" class="letter-seal">✳</span></button>
CSS
.btt-control{box-sizing:border-box;appearance:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.btt-control:focus-visible{outline:3px solid #e6a643;outline-offset:5px}.btt-hidden{opacity:0;visibility:hidden;pointer-events:none}.btt-visible{opacity:1;visibility:visible;pointer-events:auto} @media(prefers-reduced-motion:reduce){.btt-control,.btt-control *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.btt-2096{position:absolute;right:clamp(24px,5vw,82px);bottom:85px;z-index:4;width:222px;min-height:134px;border:1px solid #cbbca8;background:#fff9ef;color:#544339;box-shadow:0 15px 27px #a6958233;padding:18px 14px 12px;display:flex;align-items:end;text-align:left;gap:12px;transition:transform .3s,box-shadow .3s}.letter-envelope{display:block;position:relative;flex:none;width:60px;height:50px;background:#eadac6;border:1px solid #b79c80;box-shadow:0 3px 6px #0001;overflow:hidden}.letter-envelope:before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:90%;clip-path:polygon(0 0,100% 0,50% 70%);background:#d9c5ab;transform-origin:top;transition:transform .4s}.letter-envelope i{position:absolute;bottom:0;left:0;right:0;height:70%;background:linear-gradient(145deg,#dbc7ac 50%,transparent 50%),linear-gradient(215deg,#dbc7ac 50%,transparent 50%);background-size:50% 100%;background-repeat:no-repeat;background-position:left,right}.letter-ink{min-width:0;display:flex;flex-direction:column;gap:5px}.letter-ink small{font:700 7.8px/1.4 Arial;letter-spacing:.07em;color:#7a7166}.letter-ink b{font:500 17px/1.3 'Noto Serif CJK JP',serif;white-space:nowrap}.letter-ink em{font:italic 14px Georgia,serif;color:#856b57}.letter-seal{position:absolute;top:6px;right:12px;color:#b88f7b;font:22px Georgia;animation:sealBreath 4.8s ease-in-out infinite}.btt-2096:hover{transform:translateY(-7px);box-shadow:0 20px 32px #a6958255}.btt-2096:hover .letter-envelope:before{transform:rotateX(55deg)}@keyframes sealBreath{0%,100%{opacity:.6}50%{opacity:1}}@media(max-width:700px){.btt-2096{bottom:48px;right:16px;width:206px;min-height:120px;padding:14px 12px}.letter-envelope{width:52px;height:46px}.letter-ink b{font-size:16px}}JavaScript
(()=>{'use strict';const el=document.querySelector('[data-btt]');if(!el)return;const footerOnly=true;const reduce=window.matchMedia('(prefers-reduced-motion: reduce)');let raf=0;function update(){raf=0;const p=Math.max(0,Math.min(1,window.scrollY/Math.max(1,document.documentElement.scrollHeight-window.innerHeight)));if(!footerOnly){const shown=window.scrollY>170;el.classList.toggle('btt-visible',shown);el.classList.toggle('btt-hidden',!shown);el.tabIndex=shown?0:-1;el.setAttribute('aria-hidden',String(!shown));}el.style.setProperty('--progress',p.toFixed(3));const field=el.querySelector('[data-state]');}function onScroll(){if(!raf)raf=requestAnimationFrame(update)}window.addEventListener('scroll',onScroll,{passive:true});window.addEventListener('resize',onScroll,{passive:true});el.addEventListener('click',()=>{el.classList.add('is-going');window.scrollTo({top:0,behavior:reduce.matches?'auto':'smooth'});window.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設定にも配慮しています。