Aujourd'hui en navigant sur différents sites, j'ai fini par craquer.

Moi aussi il me faut le Back to Top, célèbre bouton en bas de page des sites internet qui apparaît lorsque l'on scroll et qui vous remet de façon smooth en haut de la page.

Je suis rapidement tombé sur un site qui mettait à disposition un script jQuery et je m'en suis inspiré pour l'intégrer à Gen3sis.

Principe

Le script est relativement simple. Tout tient en deux points.

Recalage en haut de la page

Il est permit grâce au à la fonction animate

$("html, body").animate({scrollTop: 0}, "fast");

Affichage du bouton à partir d'un certain seuil

Ce qui rend le Back to Top plus agréable, c'est le fait qu'il n'apparaisse qu'au bout de 4 tours de mollettes. Pour cela, il suffit d'utiliser l'observateur d’événement scroll

$(window).scroll(function(){
    ($(this).scrollTop() > 300) ? $back_to_top.addClass('visible') : $back_to_top.removeClass('visible');
});

Design

Pour le design, on a besoin de 2 composants principalement:

• le positionnement absolu pour que le bouton reste toujours dans le coin bas à droite.
• l'icône en forme de flèche, pur laquelle j'ai utilisé une icone Font Awesome

En utilisant la propriété CSS3 transition et en ajoutant un peu d'opacité et de d'ombré ça donne ça

/** back-to-top **/
#back_to_top {
    display: inline-block;
    height: 50px;
    width: 50px;
    position: fixed;
    bottom: 20px; 
    right: 20px;
    background-color: #4E4D4A;
    opacity: 0;
    visibility: hidden;
    border-radius: 35px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition: all 0.3s ease;
}

#back_to_top.visible { opacity: 0.7; visibility: visible; }

#back_to_top:hover { opacity: 1; }

#back_to_top i { line-height: 45px; font-size: 30px; color: white; }