【独家练手之作】CorePress移动端添加返回顶部按钮（后台主题设置添加）

效果

当然，果核剥壳大佬提供了更简单的方法，电脑端返回顶部移动端也可以使用

@media screen and (max-width: 800px) {
   body .go-top-plane {
        display: unset!important;
    }
}

我这个也是为后续添加其他功能做准备

技术点

注意添加位置，其他没试过

此处代码为

<!--移动端侧边栏-->
<div class="mobile-side">
        <div class="other-project"></div>
        <div class="return-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></div>
    </div>
<script>
        var returnTop = document.querySelector('.return-top');
        document.addEventListener('scroll', function() {
            if (window.pageYOffset >= 150) {
                returnTop.style.display = 'block';
            } else {
                returnTop.style.display = 'none';
            }
        })
returnTop.addEventListener('click', function() {
    animate(window, 0);
});
function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    clearInterval(timer);
                    if (callback) {
                        callback();
                    }
                }
                window.scroll(0, window.pageYOffset + step);
            }, 15); 
        }
    </script>

此处为样式

.mobile-side {
    display: none;
}
@media screen and (max-width:800px){
    .mobile-side {
        display: block;
        z-index: 999999;
    }
    .mobile-side {
            position: fixed;
            bottom: 20%;
            right: 10px;
            width: 50px;
            height: 100px;
            background-color: transparent;
        }
        .return-top {
            display: none;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            border-radius: 5px;
            background-color: #e8eaeb;
            text-align: center;
            line-height: 50px;
        }
}

可以结合我上一篇文章看

只是把obj.offsetLeft换成了window.pageYOffset

https://www.zhoubaiwl.club/3263.htm