演示效果

详细教程

第一步首先就是添加CSS，zibll主题设置—全局功能—自定义代码—自定义CSS样式添加以下CSS代码

第二步骤就是在zibll主题设置—全局功能—自定义代码—自定义底部HTML代码添加以下代码

<div class="gotop">
    <div class="gotop-box">
        <div class="gotop-item activity">
            <a href="https://www.lkuba.com/user/rebate">
                <img src="https://www.lkuba.com/images/zbfox-follow-activity-1.png" alt="activity" class="a1">
                <img src="https://www.lkuba.com/images/zbfox-follow-activity-2.png" alt="activity" class="a2">
                <div class="popover" style="background: url(https://www.lkuba.com/images/zbfox-follow-activity-3.png) no-repeat center/cover;"></div>
            </a>
        </div>
        <div class="gotop-item gotop-vip">
            <a class="vip-buy vip-btn pay-vip" vip-level="2" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
                <img src="https://www.lkuba.com/images/zbfox-follow-vip.svg" alt="会员">
                <p class="text">会员</p>
            </a>
        </div>
        <div class="gotop-item">
            <a href="javascript:;" class="toggle-theme toggle-radius">
                <i class="fa fa-toggle-theme">　</i>
            </a>
            <p id="themeText" class="text">昼夜</p>
        </div>
        <div class="gotop-item">
            <a class="initiate-checkin" href="javascript:;" form-action="user_checkin" ed-text="每日签到">
                <img src="https://www.lkuba.com/images/zbfox-follow-sign.gif" alt="签到">
                <p class="text">签到</p>
            </a>
        </div>
        <div class="gotop-item">
            <a href="https://www.lkuba.com/choujiang">
                <img src="https://www.lkuba.com/images/zbfox-choujiang.svg" alt="抽奖">
                <p class="text">抽奖</p>
            </a>
        </div>
        <div class="gotop-item gotop-service">
            <img src="https://www.lkuba.com/images/zbfox-kefu.svg" alt="客服">
            <p class="text">客服</p>
            <div class="gotop-service-box">
                <div class="tops">
                    <img src="www.lkuba.com/images/zbfox-follow-service-qq.png" alt="点击联系站长">
                    <a href="http://wpa.qq.com/msgrd?v=3&uin=383223&site=qq&menu=yes" class="topsqq" rel="noreferrer nofollow">点击联系站长</a>
                    <p>在线时间<br>12:00 - 22:00</p>
                </div>
                <div class="gotop-wx-box">
                    <div class="boxs">
                        <p>关注微信公众号</p>
                        <img src="https://www.lkuba.com/images/ewm_gzh.png" alt="关注微信公众号">
                    </div>
                </div>
                <div class="btms">
                    <em>交流QQ群</em>
                    <p>00000000</p>
                    <em>站长邮箱</em>
                    <span>admin@dingtook.com</span>
                </div>
            </div>
        </div>
        <div class="gotop-item gotops hide-on-scroll" id="gotops" style="display: none;">
            <a href="javascript:(scrollTo());">
                <img src="https://www.lkuba.com/images/zbfox-follow-gotop.png" alt="TOP">
                <p>TOP</p>
            </a>
        </div>
    </div>
</div>
<script>
// 当页面加载完成后执行
jQuery(document).ready(function($) {
    // 获取返回顶部按钮
    var $gotop = $('.gotop-item.gotops');
    // 监听滚动事件
    $(window).scroll(function() {
        // 如果滚动超过了200px，显示返回顶部按钮，否则隐藏
        if ($(this).scrollTop() > 200) {
            $gotop.fadeIn();
        } else {
            $gotop.fadeOut();
        }
    });
    // 返回顶部按钮点击事件
    $gotop.click(function() {
        $('html, body').animate({ scrollTop: 0 }, 800);
        return false;
    });
});
</script>

图片素材

https://pan.quark.cn/s/76c44711c233