Storybook / Back to top

Fonctionnement

L'idée est d'afficher un bouton de retour au haut de page à partir du moment où l'on a dépasser un niveau de scroll (200px dans notre cas).
Tout est customisable et adaptable (style, position, effets, déclenchements).
A noter la cohabitation avec le composant de HUB CONTACT pour comprendre au mieux les impacts.

HTML

<a href="#wrapper" id="back-to-top" class="btn btn-primary2" title="Retour en haut de page">
    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        ...
    </svg>
    <span class="sr-only">Retour en haut de page</span>
</a>

CSS

Ne pas oublier d'intervenir sur la balise HTML afin d'avoir un effet "smooth" du déplacement vers le haut.

// BACK TO TOP
// ------------------------------
html {
    scroll-behavior:smooth;
}
#back-to-top { 
    position:fixed; right:16px; bottom:64px; @include trans(); transform:scale(0);
    &:hover { bottom:70px; }
    .toTopVisible & { transform:scale(1); }
    svg { fill:currentColor; width:20px; height:20px; }
}

Exemple de code JS adapté au code évoqué plus haut :

document.addEventListener('scroll', () => {
    const bodyTag = document.querySelector('body');
    if (window.scrollY > 200) {
        bodyTag.classList.add('toTopVisible');
    } else {
        bodyTag.classList.remove('toTopVisible');
    }
});

Un peu de contenu pour provoquer le scroll :)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis eu elit a viverra. Phasellus blandit ut dolor quis semper. Pellentesque non eleifend risus, ac semper orci. Suspendisse eu neque facilisis, malesuada nisl vel, sagittis erat. Nunc aliquet lacus at massa sollicitudin vehicula. Mauris tincidunt, lorem nec maximus tempor, leo leo semper neque, non pretium mauris metus vitae massa. Quisque vitae orci mi. Sed non elit ligula. Curabitur euismod tristique turpis sed ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur scelerisque leo erat, non placerat urna interdum nec. Donec ullamcorper urna a hendrerit elementum. Praesent laoreet neque lorem, eu accumsan nibh posuere quis.

Etiam vel sapien suscipit, hendrerit ipsum id, faucibus felis. Ut quis sodales tortor. Sed nec consequat augue. Nam semper, diam eu mattis mollis, mi purus scelerisque odio, ac rutrum odio urna id ex. In ultrices efficitur lacus a ullamcorper. Morbi efficitur enim sit amet imperdiet feugiat. Suspendisse mollis nunc justo, in elementum diam lobortis id. Quisque in tempor ligula. Maecenas lacus dolor, maximus sit amet interdum non, blandit sit amet turpis. Morbi auctor velit varius ex tincidunt tempus.

Vestibulum eu eros eu odio aliquet rhoncus vitae id purus. Curabitur molestie, turpis in molestie ultricies, erat elit pharetra lorem, vitae feugiat augue purus vitae tortor. Ut at aliquet dui, vitae hendrerit metus. Praesent ac felis vel sapien tristique placerat ultrices id augue. Quisque gravida pulvinar ultricies. Fusce elementum est ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc congue eros vitae tellus molestie egestas.

Morbi arcu odio, sodales ut condimentum a, consectetur eu purus. Nam lacinia in massa eu facilisis. Pellentesque quis dui dolor. Nulla lacinia diam sed est aliquam, vitae vestibulum arcu ultricies. Aliquam mollis tempor sapien at egestas. Phasellus pharetra, augue non fermentum mattis, nisi ante malesuada nunc, tincidunt ultricies metus turpis vel risus. Duis sit amet tristique ipsum. Curabitur leo sem, dignissim vitae vestibulum nec, vestibulum ac libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque in ante in ex imperdiet aliquet. Duis ut quam sit amet sapien dignissim mattis. Sed dictum est sed lacus aliquet pulvinar. Vestibulum diam dolor, feugiat vitae vestibulum at, lobortis in dui.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eu ornare magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent gravida semper magna, quis ullamcorper turpis sodales tincidunt. Nullam non sapien aliquet, placerat sapien et, placerat arcu. Morbi ac lectus vel ante consequat blandit non vitae lectus. Sed vitae varius risus.

Contactez-nous