JS实现点击返回顶部动画

经常在浏览一些网站的时候会返现，滚动浏览器的滚动条的时候，当你滚动到一定的范围，在窗口的右下角有一个按钮，点击就会返回顶部，而且会有一个过渡的效果，当向上滚动到一定的范围的时候，按钮就会消失。
实现这种效果非常的简单。

• 初始有一个button,固定定位到右下角，初始状态是隐藏的，添加一个点击事件。
• 监听window的滚动事件，滚动到一定的范围设置button的显示隐藏。
• 动画效果使用计时器，每隔一段时间调用一次，把值赋给window.scrollTop()。

demo地址（https://xukeler.github.io/toTop/）

• html代码

<button id="btn" onclick="toTOp()">返回顶部</button>

• css代码

 body {
            height: 3000px;
        }
        * {
            padding: 0;
            margin: 0;
        }
        #btn {
            position: fixed;
            bottom: 50px;
            right: 50px;
            display: none;
        }

• js代码

  let btn = document.getElementById("btn");
    window.onscroll = function () {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//兼容IE
        if (scrollTop > 1080) {
            btn.style.display = "block"
        } else {
            btn.style.display = "none"
        }
    }

    function toTOp() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        let timer = setInterval(() => {
            scrollTop -= 100;
            window.scrollTo(0, scrollTop)
            if (scrollTop <= 0) {
                clearInterval(timer)
            }
        }, 16.7)
    }