VI. Tutoriels communautaires

Bouton "Scroll to top"

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 14/03/2016 à 10h23
Table des matières
  1. Modification HTML : frame.tpl
  2. Modification Javascript : frame.tpl
  3. Modification CSS : design.css
  4. Cas PHPBoost avant 5.0
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 class="scroll-to-top" href="#"><i class="fa fa-arrow-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;
        });
     });
    -->
</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-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding: 10px;
    background-color: rgba(0, 0, 0, .6);
    z-index: 10;
    display: none;
}








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.



enjoy :)