First Station — Return to Origin

Source Code

Copy the HTML, CSS or JavaScript you need for your project.

<!-- TB-2078 / Back to Top: insert before closing body (inside footer for TB-2083) -->
<button type="button" class="tb-btt bt2078" data-backtop aria-label="最初の駅、ページ先頭へ戻る"><span class="rail-dots"><i></i><i></i><i></i><i></i></span><span class="rail-target">始発へ戻る</span><span class="rail-id">R01　START</span></button>

/* TB-2078 : paste only this CSS into the target page. */
.tb-btt{border:0;cursor:pointer;z-index:30;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .35s,opacity .3s,background .3s,color .3s,box-shadow .3s;pointer-events:none;opacity:0;visibility:hidden}.tb-btt.is-visible{pointer-events:auto;opacity:1;visibility:visible}.tb-btt:focus-visible{outline:3px solid #f9af4b;outline-offset:5px}.only-at-end{opacity:1;visibility:visible;pointer-events:auto}
.bt2078{position:fixed;right:0;bottom:25px;width:194px;height:69px;border-radius:12px 0 0 12px;background:#fff;color:#14607e;display:grid;grid-template-columns:34px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:11px 18px 11px 9px;gap:1px 8px;box-shadow:0 12px 24px #07506d3d;border-left:5px solid #e9b341;text-align:left}
.rail-dots{grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:5px}
.rail-dots i{width:7px;height:7px;border:2px solid #3085a0;border-radius:50%;background:white}
.rail-dots i:first-child{background:#e9b341;border-color:#e9b341}
.rail-target{font-size:16px;font-weight:850;letter-spacing:.03em;white-space:nowrap}
.rail-id{font-size:9px;letter-spacing:.15em;color:#698996}
.bt2078:hover{background:#e5f4f7;transform:translateX(-7px)}
.bt2078:hover .rail-dots i{animation:station .25s forwards}
.bt2078:hover .rail-dots i:nth-child(2){animation-delay:.15s}
.bt2078:hover .rail-dots i:nth-child(3){animation-delay:.3s}
.bt2078:hover .rail-dots i:nth-child(4){animation-delay:.45s}
@keyframes station{to{background:#e9b341}}
@media (max-width:700px){.bt2078{width:174px;height:61px;padding-right:7px}.rail-target{font-size:14px}}
@media(prefers-reduced-motion:reduce){.tb-btt,.tb-btt *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

(()=>{'use strict';const control=document.querySelector('[data-backtop]');if(!control)return;const reduced=matchMedia('(prefers-reduced-motion: reduce)');const footer=control.classList.contains('only-at-end');let busy=false;function refresh(){busy=false;const max=Math.max(1,document.documentElement.scrollHeight-window.innerHeight);const p=Math.min(1,scrollY/max);document.documentElement.style.setProperty('--page-progress',p.toFixed(4));if(!footer){const show=scrollY>145;control.classList.toggle('is-visible',show);control.tabIndex=show?0:-1;control.setAttribute('aria-hidden',String(!show));}const number=document.querySelector('[data-progress-number]');if(number)number.textContent=Math.round(p*100)+'%';}function onscroll(){if(!busy){busy=true;requestAnimationFrame(refresh)}}addEventListener('scroll',onscroll,{passive:true});addEventListener('resize',onscroll,{passive:true});control.addEventListener('click',()=>window.scrollTo({top:0,behavior:reduced.matches?'instant':'smooth'}));refresh();})();

How to Use

Insert the HTML button near the end of body, load the CSS, and include JavaScript using defer. Test scrolling, returning to the top, and positioning on mobile.

Use Case

Public transport, city guides and mobility.

Technical Notes

Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.

Mobile：Check tap target, visibility and positioning on small screens.

Browser：Designed for current Chrome, Edge, Firefox and Safari.

Reduced Motion：CSS animations respect the reduced-motion preference.