<!-- 回到顶部按钮 -->
{% include 'base/backTop.html' %}

// 因为我的追番页面有回到顶部按钮了，所以在追番页面会传个backTopValue参数不让以下代码执行
{% if not backTopValue %}
    <a id="backTopBtn" class="backTopBtn" onclick="backTopFuc()">
        <img id="backTopBtnIMG" src="" alt="">
    </a>

    <script>
        window.onload = function(){
            let btnTop = document.getElementById("backTopBtn");

            // 获取当前视口的顶端数值
            function getScrollTop () {
                let sTop ;
                if (document.compatMode === "BackCompat") {
                    sTop = document.body.scrollTop;
                } else {
                    sTop = document.documentElement.scrollTop === 0 ? document.body.scrollTop : document.documentElement.scrollTop;
                }
                return sTop;
            }

            // 判断是否在顶部，显示隐藏按钮，设置按钮的图片
            function changeTopBtn() {
                let img = document.getElementById("backTopBtnIMG");
                const backTop = getScrollTop();
                // 生成随机数0和1
                const random = Math.round(Math.random())
                // 设置图片src，0是锦木千束cst，1是井上泷奈tkn
                // 这里不判断img的src是因为Django会默认给他一个前缀地址，可以试试
                if(img.alt === '') {
                    if(random === 0) {
                        img.src = "/static/images/cst.png";
                        img.alt = 'cst'
                    } else {
                        img.src = "/static/images/tkn.png";
                        img.alt = 'tkn'
                    }
                }
                // 设置显示隐藏
                if (backTop >= 20) {
                    btnTop.style.display = "block";
                } else {
                    btnTop.style.display = "none";
                }
            }

            // 页面滚动执行方法
            window.onscroll = function(){
                changeTopBtn();
            };

            // 页面加载完毕执行
            // 有的时候已经滚动到页面的中间进行刷新了，如果没有再执行的话就不会出现按钮
            changeTopBtn();
        };
    </script>
{% endif %}

/* 回到顶部 */
function backTopFuc() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

.backTopBtn {
    display: none;
    position: fixed;
    right: 2%;
    bottom: 2%;
    cursor: pointer;
    z-index: 999;
}

.backTopBtn img {
    width: 120px;
    height: 120px;
}