Bouton "Scroll to top" - Wiki

Dernière mise à jour : 19/03/2016 à 11h14

Table des matières

Modification HTML : frame.tpl
Modification Javascript : frame.tpl
Modification CSS : design.css
Cas PHPBoost avant 5.0
Cas du scroll to bottom

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 #

# 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