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 : 11/03/2016 à 06h40
[5.0+] voici comment ajouter 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



frame.tpl :



entre # INCLUDE BODY # et # INCLUDE JS_BOTTOM #, ajoutez :



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




puis à la suite de # INCLUDE JS_BOTTOM #, ajoutez



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>




enfin dans 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;
}




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



Lorsqu'il sera implémenté dans la version 5.1 et que vous n'en voulez pas, il suffit de modifier la valeur du bottom dans le css pour l'envoyer en dehors de la page, par exemple 
bottom: -1000;
ou encore de supprimer le lien dans le frame.tpl



Pour ceux, qui sont toujours en [4.1], il faut ajouter l'appel de Jquery ainsi que le no-conflict



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 javascript



enjoy :)