Gallery Footer Return — フッター一体型タイポグラフィ

Source Code

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

<footer class="tb-btt-footer"><button aria-label="ページの先頭へ戻る" class="back-top back-top-2107 tb-btt-button" title="ページの先頭へ戻る" type="button"><span class="btt-meta">PAGE TOP / BACK TO THE BEGINNING</span><span class="btt-main">入口へ戻る</span><span aria-hidden="true" class="btt-symbol">↗</span><span aria-hidden="true" class="btt-underline"></span></button></footer>

/* TIPSBLOCKS Back to Top — standalone control only. */
.tb-btt-button,.tb-btt-button *,.tb-btt-button *::before,.tb-btt-button *::after{box-sizing:border-box}
.tb-btt-button{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;--accent:#26393b}
.tb-btt-button:focus-visible{outline:3px solid #edb45f;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tb-btt-button,.tb-btt-button *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Footer-integrated design. Mount inside a real page footer. */
.tb-btt-footer{display:block;background:#172c27;padding:22px 20px 25px;min-height:200px;color:#faf8e9;width:100%;max-width:100%;box-sizing:border-box;overflow-x:clip;}
.tb-btt-footer .back-top-2107{position:relative!important;grid-column:auto;grid-row:auto;}
.back-top{font-family:inherit;appearance:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;position:fixed;z-index:30;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);transition:opacity .28s,transform .28s,visibility .28s;isolation:isolate}
.back-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.back-top.is-returning{pointer-events:none}
.back-top .btt-symbol{font-weight:450;font-size:27px;line-height:1}
.back-top .btt-main{font-weight:750;line-height:1.45;text-align:center;letter-spacing:.06em}
.back-top .btt-meta{font-size:9px;line-height:1.4;letter-spacing:.11em;text-align:center}
.back-top:hover{filter:brightness(1.1)}
@media (max-width:650px){.back-top{max-width:112px}}
@keyframes flame{to{transform:scaleY(1.45);background:#ffc34a}}
@keyframes buoybob{to{translate:0 -5px}}
.back-top-2107{position:relative;z-index:1;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 80px;align-items:center;justify-items:start;background:transparent;color:#faf8e9;border:0;border-top:1px solid #7d9084;border-bottom:1px solid #7d9084;padding:34px 15px 26px;width:100%;min-height:174px;text-align:left;gap:8px}
.back-top-2107 .btt-meta{grid-column:1/-1;font-family:Arial,sans-serif;color:#a5b8aa;font-size:12px;text-align:left}
.back-top-2107 .btt-main{font-weight:400;text-align:left;font-size:clamp(34px,4.4vw,70px);line-height:1.35}
.back-top-2107 .btt-symbol{font-size:59px;font-weight:200;transition:transform .2s}
.back-top-2107 .btt-underline{display:block;position:absolute;width:0;height:3px;background:#e7c4a9;bottom:-2px;left:0;transition:width .5s}
.back-top-2107:hover .btt-underline{width:100%}
.back-top-2107:hover .btt-symbol{transform:translate(8px,-8px)}
@media (max-width:650px){.back-top-2107{grid-column:1;grid-row:auto;min-height:144px}
.back-top-2107 .btt-main{font-size:35px}}
@media (max-width:650px){.back-top-2107{max-width:none!important;width:100%;grid-template-columns:minmax(0,1fr) 50px;padding:21px 0;min-height:145px}
.back-top-2107 .btt-main{white-space:nowrap;font-size:clamp(27px,7.5vw,38px)}
.back-top-2107 .btt-symbol{font-size:45px}
.back-top-2107 .btt-meta{font-size:10px}}

/** TIPSBLOCKS TB-2107 — independent Back to Top. */
(()=>{'use strict';
 const control=document.querySelector('.tb-btt-button.back-top-2107');if(!control)return;
 const footer=true;
 const reduced=window.matchMedia('(prefers-reduced-motion: reduce)');
 const threshold=190;
 let raf=0;
 function update(){raf=0;const visible=footer||window.scrollY>threshold;
 control.classList.toggle('is-visible',visible);
 if(!footer){control.setAttribute('aria-hidden',String(!visible));control.tabIndex=visible?0:-1;}
 }
 window.addEventListener('scroll',()=>{if(!raf)raf=requestAnimationFrame(update)},{passive:true});
 window.addEventListener('resize',update,{passive:true});
 control.addEventListener('click',()=>{control.classList.add('is-returning');
 window.scrollTo({top:0,behavior:reduced.matches?'instant':'smooth'});
 if(reduced.matches)control.classList.remove('is-returning');
 else {const onStop=()=>{if(window.scrollY<=3){control.classList.remove('is-returning');window.removeEventListener('scroll',onStop)}};
 window.addEventListener('scroll',onStop,{passive:true});}
 });
 update();
})();

How to Use

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

Use Case

アート施設、展示会、デザインスタジオ

Technical Notes

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

Mobile：タップ領域、表示サイズ、コンテンツとの重なりを確認してください。

Browser：現行のChrome、Edge、Firefox、Safariを想定しています。

Reduced Motion：prefers-reduced-motionの設定を尊重して先頭復帰の動きを抑えます。