Help

Help > Forum > Thèmes et apparence > Ajouter une icône « retour en haut de page »

Ajouter une icône « retour en haut de page »

Vous pouvez suivre les instructions ci-dessous pour ajouter une icône de retour en haut de page afin que les utilisateurs puissent cliquer dessus pour accéder au haut de la page.

  1. Connectez-vous à votre compte Website Toolbox.
  2. Cliquez sur Intégrer lien dans le menu principal.
  3. Cliquez sur Code personnalisé lien.
  4. Collez le code suivant dans Code HTML du pied de page du forum zone de texte :
    <style>
    #jumpToTopBtn {
         display: none;
         position: fixed;
         bottom: 40px;
         right: 10px;
         z-index: 8;
         border: none;
         outline: none;
         background-color: #999;
         color: white;
         cursor: pointer;
         border-radius: 4px;
         font-size: 0;
         padding: 0;
         background: #aaa;
         width: 40px;
         height: 40px;
         border-radius: 100%;
         opacity: 0.5;
    }
    #jumpToTopBtn:before {
         content: '';
         width: 15px;
         height: 15px;
         display: block;
         transform: rotate(-45deg);
         border-top: 3px solid #fff;
         border-right: 3px solid #fff;
         margin-top: 5px;
         margin-left: 12px;
    }
    #jumpToTopBtn:hover {
         background: #aaa;
         opacity:1;
    }
    </style>
    <script defer>
    function scrollFunction(scrollPosition) {
         var bodyScrollToTop = document.body.scrollTop;
         var documentScrollToTop = document.documentElement.scrollTop;
         if(typeof scrollPosition != "undefined" && scrollPosition != "") {
             bodyScrollToTop = parseInt(scrollPosition) +
    parseInt(bodyScrollToTop);
             documentScrollToTop = parseInt(scrollPosition) +
    parseInt(documentScrollToTop);
         }
         if (bodyScrollToTop > 150 || documentScrollToTop > 150) {
             document.getElementById("jumpToTopBtn").style.display = "block";
         } else {
             document.getElementById("jumpToTopBtn").style.display = "none";
         }
    }
    window.addEventListener("DOMContentLoaded", function(){
         if(wtbx.embed.isForumEmbedded()) {
             if (window.addEventListener) {
                 window.addEventListener('message',(evt) => {
                     var scrollPosition =
    parseInt(evt.data.wtbIframeHeightFromTop) +
    parseInt(wtbx.embed.scrollPosition);
                     scrollFunction(scrollPosition);
                 }, false);
             }
             document.getElementById("jumpToTopBtn").style.display = "block";
         } else {
             window.onscroll = function() {scrollFunction()};
         }
    
         jQ('#jumpToTopBtn').click(function() {
             if(wtbx.embed.isForumEmbedded()) {
                 parent.postMessage({
                     'action':'scrollToTop',
                     'redirectUrl':window.location.href
                 },'*');
                 return false;
             } else {
                 document.body.scrollTop = 0;
                 document.documentElement.scrollTop = 0;
             }
         });
    });
    </script>
    <button id="jumpToTopBtn" title="Go to top">Top</button>
    		
  5. Enregistrer vos modifications.


If you still need help, please contact us.