[Résolu] Revenir en haut de la page

mr-tocmr-toc Member
mars 2015 modifié dans Modifications
Bonjour,

J'ai récemment installé PluXml et j'ai quelques articles qui sont un peu long. Je cherche à ajouter un bouton revenir en haut (comme présent sur ce forum).
Dans le footer, il y a bien Haut de page mais pas possible de le positionné avec le CSS (y a pas de balise).
Je sais pas si c'est bien de le tatouer avec du CSS après lui avoir mis une balise ou le mettre ailleurs

Réponses

  • JosJos Member
    Bonjour,

    Tu peux utiliser des ancres HTML.
  • mr-tocmr-toc Member
    Merci, je vais faire comme ça.
    j'imagine que le mieux est de l'intégrer au footer.php ?
  • JosJos Member
    Tu peux l'intégrer ou tu veux, en fonction de l'ergonomie que tu souhaite appliquer à la page.

    Par exemple, sur le thème par défaut actuel, tu as une ancre situé dans le footer qui renvoi vers le haut de la page.
  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour

    Assure toi d'avoir dans ton thème

    header.php
    <body id="top">
    

    footer.php
    <a href="<?php $plxShow->urlRewrite('#top') ?>" title="<?php $plxShow->lang('GOTO_TOP') ?>"><?php $plxShow->lang('TOP') ?></a>
    

    si tu n'utilises pas les fichiers de langue du thème par défaut de PluXml, tu peux coder en dur
    <a href="<?php $plxShow->urlRewrite('#top') ?>" title="Retour en haut">Retour en haut</a>
    

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • mr-tocmr-toc Member
    je te remercie pour les précision.
    Je vais faire les modifications.
  • mr-tocmr-toc Member
    J'ai donc modifié le footer.php
    [== PHP ==]
    <p>	<div id="scrollToTop">
                              <a href="<?php $plxShow->urlRewrite('#top') ?>" title="<?php $plxShow->lang('GOTO_TOP') ?>">
    <!-- <?php $plxShow->lang('TOP') ?> -->
    ⇧
    </a></div>
    
    

    et le css
    [== CSS ==]
    
    #scrollToTop {position: fixed;bottom: 5px; right:7px; font-size: 2.5em;font-weight: bold; }
    #scrollToTop a  {text-decoration: none;}
    

    mais j'ai un pb avec les petits écran. je vais regarder ça.
  • mr-tocmr-toc Member
    j'ai trouvé pour adapter en fonction de la taille de l'écran
    [== CSS ==]
    
    @media screen and (max-width:800px) {
    	#scrollToTop {position: fixed;bottom: 10px; right:0px; font-size: 1em;font-weight: bold; }
    }
    
    
  • Jerry WhamJerry Wham Member
    mars 2015 modifié
    Tu peux utiliser le plugin scrollToTop.
  • mr-tocmr-toc Member
    merci pour le lien.

    j'ai pensé utilisé ton plugin, mais j'ai vu qu'il y avait déjà tout de prêt (ou presque). J'ai préféré bidouiller le footer.php avec un peu de css.
    Le résultat est similaire avec seulement quelques lignes, même si a la prochaine maj ça risque de péter.
Connectez-vous ou Inscrivez-vous pour répondre.