JS_回到顶部按钮的实现

很多页面都有一个回到顶部的按钮，一旦点击页面的scrollbar就会变为0

只需要document.body.scrollTop = document.documentElement.scrollTop = 0,在这个基础上在加一个缓动公式。

下面贴上我的代码

html:

<div class="content">
        我是顶部<br><br>
        我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>我不是顶部<br>
    </div>
    <input type="button" id="toTop" class="toTop" value="返回顶部↑">

css:

.content{
    height: 3000px;
    font-size: 17px;
}
.toTop{
    width:160px;
    height: 30px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    font-size: 20px;
    font-family: "微软雅黑";
    font-weight: bold;
    letter-spacing: 5px;
    display: none;
}

js代码

window.addEventListener("load",function(){

    var toTop = document.getElementById("toTop");
    var posY = 0;

    window.addEventListener("scroll",function(){
        posY = window.pageYOffset || document.documentElement.scrollTop;

        if(posY == 0){
            toTop.style.display = "none";
        }else{
            toTop.style.display = "block"
        }
    })

    toTop.addEventListener("click",function(){
            var des = 0;
            var start = posY;

            moveSlowly(start,des);
    })

})

var timer = null;
function moveSlowly(start,des,time){
    clearInterval(timer);
    var speedTime = time || 100;
    var distance = des - start;
    var speed = distance/speedTime;
    var pos = start;
    var i = 1;

    timer = setInterval(function(){

        if(i == speedTime){
            document.documentElement.scrollTop = document.body.scrollTop = des;
            clearInterval(timer);
        }else{
            pos = pos + speed;
            document.documentElement.scrollTop = document.body.scrollTop = pos;
            i++;
        }

    },1)
}

效果展示：（移动滚动条后，右下角有个回到顶部的按钮）

---

 

---

以上内容，如有错误请指出，不甚感激。