Bouton "Scroll to top"

Ce tutorial va vous expliquez comment ajouter sur la version [5.0] un bouton qui permet de remonter automatiquement en haut de page lorsque celle-ci est un peu longue, vous évitant ainsi de scroller pour y parvenir.







Modification HTML : frame.tpl







Dans le fichier frame.tpl, ajoutez entre les lignes 
# INCLUDE  BODY #
et 
# INCLUDE  JS_BOTTOM #
le code



Code TPL : 
<a id="scroll-to-top" class="scroll-to" href="#"><i class="fa fa-chevron-up"></i></a>








Modification Javascript : frame.tpl



Dans le fichier frame.tpl, ajoutez juste après 
# INCLUDE  JS_BOTTOM #
le code suivant :



Code JAVASCRIPT : 
<script>
    <!--
    jQuery(document).ready(function(){
        jQuery(window).scroll(function(){
            if ($(this).scrollTop() > 800) {
                jQuery('#scroll-to-top').fadeIn();
            } else {
                jQuery('#scroll-to-top').fadeOut();
            }
        });
 
        jQuery('#scroll-to-top').click(function(){
            jQuery('html, body').animate({scrollTop : 0},1200);
            return false;
        });
        jQuery('#scroll-to-bottom').click(function(){
            jQuery('html, body').animate({scrollTop: $(document).height()-$(window).height()},1200);
            return false;
        });
    });
    -->
</script>




Dans la partie javascript, 800 représente le nombre de crans de scroll avant l'apparition du bouton (1 cran = 100), 1200 représente en millisecondes, le temps pour "remonter" en haut de page







Modification CSS : design.css



Enfin dans le fichier design.css à la fin du fichier, ajoutez :



Code CSS : 
.scroll-to {
    position: fixed;
    z-index: 10;
    display: none;
    background-color: rgba(15, 15, 16, 0.8);
}
#scroll-to-top {
    right: 25px;
    bottom: 25px;
    padding: 9px 11px 11px 10px;
}
.scroll-to i {
    font-size: 2em;
    color: rgba(255, 255, 255, 0.8);
    transition: 0.2s;
}
.scroll-to:hover i {
    color: rgba(255, 255, 255, 1);
    transition: 0.5s;
}








Ce code sera sera implémenté de base dans la version 5.1. Dans l’éventualité ou vous n'en voulez pas, il suffira de modifier la valeur du bottom de la classe 
.scroll-to-top
dans le fichier design.css pour l'envoyer en dehors de la page, par exemple 
bottom: -1000;
ou encore de supprimer le lien dans le fichier frame.tpl







Cas PHPBoost avant 5.0







Pour ceux, qui sont toujours en [4.1] voir moins, il faut ajouter l'appel du plugin Jquery et utiliser la méthode du no-conflict pour assurer une compatibilité avec le plugins Javascript Prototype.



Dans le fichier frame.tpl juste après 
# INCLUDE  JS_TOP #
, ajoutez :



Code TPL : 
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script> var $jQ = jQuery.noConflict();</script>




et remplacez jQuery par $ dans le script d'avant.







Cas du scroll to bottom







Il est possible que dans votre design, vous souhaitiez ajouté un bouton pour descendre et pied de page et non pas monté en haut de page.



C'est la raison pour laquelle nous avons ajouté les lignes :
Code JAVASCRIPT : 
jQuery('#scroll-to-bottom').click(function(){
    jQuery('html, body').animate({scrollTop: $(document).height()-$(window).height()},1200);
    return false;
});




Pour que cela fonctionne, il vous suffit de mettre l'id 
#scroll-to-bottom
à votre bouton. 
<a id="scroll-to-bottom" href="#"></a>




Ce bouton n'étant pas aussi courant que le scroll-to-top, il n'est pas présent dans le thème de base. Il vous faudra le customiser à votre souhait pour correspondre à votre design.







enjoy :)