Help > Forum > 主题和外观 > 添加 “返回顶部” 图标

添加 “返回顶部” 图标

您可以按照以下说明添加 “返回顶部” 图标,以便用户可以单击该图标跳至页面顶部。

  1. 登录您的Website Toolbox账户。
  2. 点击 整合 页面顶部的链接。
  3. 点击 HTML 链接。
  4. 将以下代码粘贴到 论坛页脚 HTML 代码 文本框:
    <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. 保存 你的改变。


If you still need help, please contact us.