Bouton scroll histoire

Description

<style>
.bouton-suivant {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
background: #4a5d45;
color: #e4efb0;
border: 0;
border-radius: 999px;
padding: 14px 28px;
font: 600 16px/1 inherit;
font-family: inherit;
box-shadow: 0 4px 14px rgba(0,0,0,.25);
cursor: pointer;
}
.bouton-suivant:hover { filter: brightness(1.1); }
@media (max-width: 767px) {
.bouton-suivant { bottom: 16px; padding: 12px 22px; font-size: 15px; }
}
</style>
<script>
document.addEventListener(‘DOMContentLoaded’, function () {
var etapes = document.querySelectorAll(‘.etape-histoire’);
if (!etapes.length) return;

var btn = document.createElement(‘button’);
btn.type = ‘button’;
btn.className = ’bouton-suivant’;
document.body.appendChild(btn);

function suivante() {
for (var i = 0; i < etapes.length; i++) {
if (etapes[i].getBoundingClientRect().top > 20) return etapes[i];
}
return null;
}

function maj() {
if (window.scrollY < 50) btn.textContent = ‘Découvrir l’histoire ↓’;
else btn.textContent = suivante() ? ‘Suite ↓’ : ‘Retour en haut ↑’;
}

btn.addEventListener(‘click’, function () {
var s = suivante();
if (s) s.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
else window.scrollTo({ top: 0, behavior: ‘smooth’ });
});

window.addEventListener(‘scroll’, maj, { passive: true });
maj();
});
</script>