Help > Forum > Designs und Erscheinungsbild > Hinzufügen eines „Zurück zum Anfang“ -Symbols

Hinzufügen eines „Zurück zum Anfang“ -Symbols

Sie können den Anweisungen unten folgen, um ein Symbol „Zurück zum Anfang“ hinzuzufügen, sodass Benutzer darauf klicken können, um zum Anfang der Seite zu springen.

  1. Melden Sie sich bei Ihrem Website Toolbox-Konto an.
  2. Klicken Sie auf Integrieren Link oben auf der Seite.
  3. Klicken Sie auf HTML Link.
  4. Fügen Sie den folgenden Code in das Feld HTML-Code der Foren-Fußzeile Textfeld:
    <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. Speichern deine Änderungen.


If you still need help, please contact us.