Terug naar boven met voortgangsring New

<!-- Terug naar boven met voortgangsring · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tnb">
<div class="tnb__scroll" tabindex="0" aria-label="Vacatures, scrollbaar">
<p class="tnb__h" tabindex="-1">8 vacatures bij De Vries Installatietechniek</p>
<p class="tnb__sub">Amersfoort en omgeving · bijgewerkt di 7 okt</p>
<ul class="tnb__list">
<li><b>Servicemonteur cv en warmtepomp</b><span>Amersfoort · 38 uur · € 3.100 tot € 3.900</span></li>
<li><b>Leerling installatiemonteur (BBL)</b><span>Amersfoort · 40 uur · € 2.150 tot € 2.600</span></li>
<li><b>Elektromonteur woningbouw</b><span>Nijkerk · 40 uur · € 2.900 tot € 3.600</span></li>
<li><b>Werkvoorbereider</b><span>Amersfoort · 36 uur · € 3.400 tot € 4.300</span></li>
<li><b>Planner storingsdienst</b><span>Amersfoort · 32 uur · € 2.800 tot € 3.300</span></li>
<li><b>Projectleider utiliteit</b><span>Utrecht · 40 uur · € 4.300 tot € 5.400</span></li>
<li><b>Calculator E en W</b><span>Amersfoort · 38 uur · € 3.600 tot € 4.500</span></li>
<li><b>Magazijnmedewerker</b><span>Leusden · 24 tot 32 uur · € 2.250 tot € 2.600</span></li>
</ul>
<p class="tnb__end">Staat je functie er niet bij? Mail je cv naar werken@voorbeeld.nl.</p>
</div>
<button type="button" class="tnb__btn" aria-label="Terug naar boven" tabindex="-1"><svg viewBox="0 0 48 48" aria-hidden="true"><circle class="tnb__bg" cx="24" cy="24" r="20"/><circle class="tnb__ring" cx="24" cy="24" r="20"/><path class="tnb__arrow" d="M24 31V17M18 22.5l6-6 6 6"/></svg></button>
<span class="tnb__sr" aria-live="polite"></span>
</div>
</div>

/* Terug naar boven met voortgangsring · NedDev · eigen werk. */
.tnb{position:absolute;inset:0;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;text-align:left}
.tnb *,.tnb *::before,.tnb *::after{box-sizing:border-box}
.tnb__scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;padding:16px 18px 30px;scrollbar-width:thin}
.tnb__scroll:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.tnb__h{margin:0 0 4px;font-size:17px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.tnb__h:focus{outline:none}
.tnb__h:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.tnb__sub{margin:0 0 12px;font:500 10.5px/1.3 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57}
.tnb__list{list-style:none;margin:0;padding:0}
.tnb__list li{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-bottom:1px solid #eeebe7}
.tnb__list b{font-size:14px;font-weight:600}
.tnb__list span{font-size:12px;color:#5c5a57;font-variant-numeric:tabular-nums}
.tnb__end{margin:14px 0 0;font-size:12.5px;color:#3d3b38}
.tnb__btn{position:absolute;right:14px;bottom:14px;z-index:2;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.tnb__btn.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
.tnb__btn svg{display:block;width:46px;height:46px;transform:rotate(-90deg)}
.tnb__bg{fill:#0a0a0a;stroke:#3d3b38;stroke-width:3;transition:fill .15s}
.tnb__ring{fill:none;stroke:#F5480F;stroke-width:3;stroke-linecap:round}
.tnb__arrow{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:24px 24px}
.tnb__btn:hover .tnb__bg{fill:#2e2c2a}
.tnb__btn:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.tnb__btn:active{transform:scale(.94)}
.tnb__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tnb__btn,.tnb__btn.is-on{transition:none;transform:none}}

// Terug naar boven met voortgangsring · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.tnb');if(!w)return;
var sc=w.querySelector('.tnb__scroll'),btn=w.querySelector('.tnb__btn'),ring=w.querySelector('.tnb__ring'),h=w.querySelector('.tnb__h'),sr=w.querySelector('.tnb__sr');
var C=2*Math.PI*20;ring.style.strokeDasharray=C;ring.style.strokeDashoffset=C;
var rm=matchMedia('(prefers-reduced-motion: reduce)'),tick=false;
function upd(){tick=false;var max=sc.scrollHeight-sc.clientHeight,y=sc.scrollTop,p=max>0?y/max:0;
 ring.style.strokeDashoffset=C*(1-Math.min(1,p));var on=y>sc.clientHeight*.5;
 if(on!==btn.classList.contains('is-on')){btn.classList.toggle('is-on',on);btn.tabIndex=on?0:-1;}}
sc.addEventListener('scroll',function(){if(!tick){tick=true;requestAnimationFrame(upd);}},{passive:true});
btn.addEventListener('click',function(){sc.scrollTo({top:0,behavior:rm.matches?'auto':'smooth'});
 var done=function(){h.focus({preventScroll:true});sr.textContent='Terug bovenaan';};
 if(rm.matches){done();}else{var t0=performance.now();(function wait(){if(sc.scrollTop<2||performance.now()-t0>1500)done();else requestAnimationFrame(wait);})();}});
upd();
}
init(document.querySelector('.jouw-container'));