フッター・ハンドオフ — ページトップボタン

Source Code

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

<!-- TB-2057 / Footer Handoff | place inside the existing footer (script will move it to footer) -->
<button class="backtop tb-btt-button w2057 footer-backtop" type="button" aria-label="Back to top"><span class="w57line"></span><span class="w57text">BACK TO TOP</span><span class="w57up">↗</span></button>

/* TB-2057 / Footer Handoff */
.backtop{box-sizing:border-box;position:fixed;z-index:50;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);text-align:center;transition:opacity .24s, transform .28s, visibility .24s}.backtop.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.backtop.w2055.is-visible{transform:translate(-50%,0)}.backtop:focus-visible{outline:3px solid #e7ab4c;outline-offset:4px}
.w2057{position:absolute;opacity:1;visibility:visible;pointer-events:auto;transform:none;right:clamp(22px,6vw,80px);top:44px;border:0;color:inherit;background:transparent;padding:12px 0;display:flex;align-items:center;gap:18px;height:48px;font:700 11px Arial,sans-serif;letter-spacing:.15em}.w57line{height:1px;width:48px;background:currentColor;transition:width .3s}.w57up{font:400 21px Georgia,serif;transform:rotate(-45deg);transition:transform .3s}.w2057:hover .w57line{width:75px}.w2057:hover .w57up{transform:rotate(-45deg) translate(4px,-4px)}.w2057.is-hidden{opacity:1;pointer-events:auto;visibility:visible;transform:none}.w2057:not(.is-visible){opacity:1;pointer-events:auto;transform:none}@media(max-width:480px){.w2057{top:43px;right:20px;left:auto;gap:7px}.w57line{width:12px}.w57text{font-size:0}.w57text:after{content:'TOP';font-size:10px}.w57up{font-size:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* POLISH PASS 2026-10-18: alignment, tactile size, emphasis & individual character */
.backtop{isolation:isolate;-webkit-tap-highlight-color:transparent;}
.backtop:focus-visible{outline:3px solid #f0af42;outline-offset:4px;}
@media(prefers-reduced-motion:reduce){.backtop,.backtop *{transition-duration:.01ms!important;animation-duration:.01ms!important}}

.w2057{right:clamp(20px,6vw,90px);top:50px;min-width:181px;justify-content:flex-end;gap:12px;letter-spacing:.11em;padding:9px 0;border-bottom:1px solid currentColor;}
.w2057 .w57line{flex:0 0 21px;}
.w2057:hover{opacity:.7;transform:translateY(-3px)}
@media(max-width:650px){.w2057{position:relative;top:auto;right:auto;left:auto;margin:24px 0 10px auto;min-width:0;width:max-content;height:47px;max-width:100%;}}

(()=>{'use strict';const button=document.querySelector('.backtop');if(!button)return;const footerOnly=button.classList.contains('footer-backtop');if(footerOnly){const foot=document.querySelector('footer');if(foot&&!foot.contains(button)){if(getComputedStyle(foot).position==='static')foot.style.position='relative';foot.appendChild(button);}}const reduced=matchMedia('(prefers-reduced-motion: reduce)');let scheduled=false;function update(){scheduled=false;if(footerOnly)return;const shown=window.scrollY>160;button.classList.toggle('is-visible',shown);button.classList.toggle('is-hidden',!shown);button.tabIndex=shown?0:-1;button.setAttribute('aria-hidden',String(!shown));if(button.classList.contains('w2056')){const max=Math.max(1,document.documentElement.scrollHeight-innerHeight);button.style.setProperty('--progress',(Math.round(Math.min(100,scrollY/max*100)))+'%');}}function onScroll(){if(!scheduled){scheduled=true;requestAnimationFrame(update)}}button.addEventListener('click',()=>window.scrollTo({top:0,behavior:reduced.matches?'instant':'smooth'}));addEventListener('scroll',onScroll,{passive:true});addEventListener('resize',onScroll,{passive:true});update();})();

How to Use

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

Use Case

文化施設、財団、ブランドのフッターナビゲーション。

Technical Notes

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

Mobile：端末幅ごとにボタンの位置とタップ領域を確認してください。

Browser：モダンブラウザ向け。実際のページでのレイアウトを検証してください。

Reduced Motion：prefers-reduced-motion 設定によりアニメーションを抑制します。