Retour en haut de page avec pourcentage

Hackodrome

babsolune Membre non connecté

Equipe Développement Administrateur

Le 15/03/2023 à 18h40

#168504

PHPBoost

HTML

CSS

Un petit trick pour remplacer la flèche par défaut qui permet de remonter vers le

Haut de page

En haut de page, le carré est rempli de couleur et affiche 0% et quand on arrive en bas de la page, on affiche 100% et le carré s'est vidé de sa couleur.

HTML

Si ce n'est pas déjà fait, on surcharge le body.tpl dans le thème utilisé, et on y remplace le scroll-to-top

Mon_theme
+body.tpl

On y déclare la structure d'une barre de progression que l'on fera fonctionner en radial plutôt qu'en linéaire

chercher

Code HTML :

<span id="scroll-to-top" class="scroll-to" role="button" aria-label="{@common.scroll.to.top}"><i class="fa fa-chevron-up" aria-hidden="true"></i></span>

remplacer par

Code HTML :

<div id="scroll-circle">
    <div class="progression" style="background-image: linear-gradient(90deg, rgb(var(--bgc-alt)) 50%, transparent 50%), linear-gradient(90deg, rgb(var(--bgc-main)) 50%, rgb(var(--bgc-alt)) 50%);">
        <div class="percentage">0%</div>
        <div class="back-to-top" aria-label="{@common.scroll.to.top}"><i class="fas fa-arrow-up" aria-hidden="true"></i></div>
    </div>
</div>

on reviendra plus tard dans ce fichier pour y déclarer l'appel du javascript

CSS

On déclare un nouveau fichier css dans l'import des fichiers

Mon_theme
+theme
++@import.css

En fin de fichier, ajouter

@import url('../../Mon_theme/theme/scrollcircle.css') screen;

Créer le fichier

scrollcircle.css

Mon_theme
+theme
++scrollcircle.css

où on déclare toutes les propriétés nécessaires au bouton pour un placement en bas à droite sur la page

Code CSS :

// On fixe et définit le conteneur du bouton
#scroll-circle {
    position: fixed;
    z-index: 9999;
    bottom: 1.618em;
    right: 1.618em;
    width: 40px;
}
// On définit le conteneur de variation de couleur
#scroll-circle .progression {
    width: 40px;
    height: 40px;
    background-color: var(--bgc-alt);
    border-width: 2px;
    border-style: solid;
    border-color: var(--bdr-alt);
}
// On défini et place l'affichage du pourcentage
#scroll-circle .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-color: var(--bgc-main);
    border-radius: 50% !important;
    text-align: center;
    line-height: 8.809em;
    font-size: 0.618em;
    font-weight: 600;
    border-width: 2px;
    border-style: solid;
    border-color: var(--bdr-alt);
}
// On place la flèche
#scroll-circle .back-to-top {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.618rem;
    cursor: pointer;
}
// Décalage de l'affichage sur écran > 769px
@media (min-width: 769px) {
    #scroll-circle .percentage { line-height: 7.809em; }
}

JS

On crée un fichier js

Mon_theme
+js
++scroll.circle.js

Dans lequel on déclare 2 fonctions
L'idée est de regarder où se trouve le contenu du site par rapport à la hauteur de l'écran, de le traduire en pourcentage et de transcrire ce pourcentage en degré.

Code JAVASCRIPT :

function HeightPercent() {
    var contentHeight = jQuery('body').outerHeight();
    var winHeight = jQuery(window).outerHeight();
    var position = jQuery(window).scrollTop();
    var lastScreenPos = contentHeight - winHeight;
    if (lastScreenPos != 0)
        var heightRatio = position / lastScreenPos;
    else
        var heightRatio = position / (contentHeight + 100);
    if (heightRatio > 1)
        heightRatio = 1;
    var heightPercentage = Math.round(heightRatio * 100);
    return heightPercentage;
}
function PxScrollCircle() {
    var loop = 100 / HeightPercent();
    var increment = Math.round(360 / loop);
    var degre = (90 + increment);
    var target = jQuery("#scroll-circle .progression");
    if (increment < 180)
        target.css({
            'background-image':'linear-gradient(90deg, var(--bgc-alt) 50%, transparent 50%), linear-gradient(' + degre + 'deg, var(--bgc-main) 50%, var(--bgc-alt) 50%)'
        });
    else
        target.css({
            'background-image':'linear-gradient(' + degre + 'deg, var(--bgc-main) 50%, transparent 50%), linear-gradient(270deg, var(--bgc-main) 50%, var(--bgc-alt) 50%)'
        });
    jQuery("#scroll-circle .percentage").html(HeightPercent() + "%");
}

L'idéal est de créer la version minifiée en plus du fichier js qui servira lorsque le cache css du site est activé

Finalisation

On revient dans le fichier

Mon_theme
+body.tpl

où on va appeler le fichier javascript, initialiser ses fonctions et prévoir un retour en haut de page lorsqu'on clique sur la flèche du bouton
À la fin du fichier, ajouter

Code JAVASCRIPT :

<script src="{PATH_TO_ROOT}/templates/Mon_theme/js/scroll.circle# IF C_CSS_CACHE_ENABLED #.min# ENDIF #.js"></script>
<script>
    jQuery(window).on("load scroll", function() {PxScrollCircle();});
    jQuery('#scroll-circle .back-to-top').on('click', function() {
        jQuery("html, body").animate({ scrollTop: 0 }, "slow");
        return false;
    })
</script>