页面返回顶部

返回顶部按钮

style板块

#box {
        border: 1px solid rgb(183, 181, 181);
        background-color: rgb(192, 190, 190);
        width: 50px;
        height: 50px;
        top: 90%;
        position: fixed;
        margin-left: 1600px;
        display: none;
    }
    

script部分

下拉一定位置出现按钮

window.onscroll = function () {
            var box = document.getElementById("box")
            if (document.documentElement.scrollTop > 1000 || document.body.scrollTop > 1000) {
                box.style.display = "block";
            } else {
                box.style.display = "none";
            }
        }

点击按钮由快到慢返回顶部

 box.onclick = (function () {
            var timer = setInterval(function () {
                var pageyoffset = window.pageYOffset;
                var slow = Math.ceil((pageyoffset - 0) / 10);
                window.scroll(0, pageyoffset - slow);
                if (pageyoffset == 0) {
                    clearInterval(timer);
                }
            }, 30)