Help > Forum > Temas y Apariencia > Añadir un icono de «volver al principio»

Añadir un icono de «volver al principio»

Puedes seguir las instrucciones a continuación para añadir un icono de volver al principio para que los usuarios puedan hacer clic en él para ir a la parte superior de la página.

  1. Inicie sesión en su cuenta de Website Toolbox.
  2. Haga clic en el Integrar en la parte superior de la página.
  3. Haga clic en el HTML enlace.
  4. Pegue el siguiente código en el campo Código HTML pie de página del foro cuadro de texto:
    <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. Guardar tus cambios.


If you still need help, please contact us.