【JS】顶部悬浮及缓慢回到顶部

效果图

拉动滚动条时“回到顶部”按钮位置不变(使用JS实现)，点击缓慢回到顶部

HTML部分–给足高度，出现滚动条

<h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <div class="top" onclick="back()">回到顶部</div>

CSS

body {
            height: 3000px;
        }

        .top {
            position: absolute;
            line-height: 30px;
            padding: 0 10px;
            color: white;
            background: blueviolet;
            left: 200px;
            top: 100px;
            border: 5px double aqua;
            /* border: 5px; */
        }

JS部分

<script>
        var div=document.querySelector('.top');//按照class名获取节点
        // console.log(div);
        var divTop=100;//设置初始高度为100,与css中值相等
        //定义一个空值来接受定时器
        var times;
        //定义窗口滚动事件
        window.onscroll=function(){
            //获取距上方的距离
           var t= document.documentElement.scrollTop;
        //    console.log(t);
        //设置div与上方距离为初始高度+距上方距离，保证div在页面中位置固定
        div.style.top=divTop+t+"px";
        }
        //按钮单击调用函数
        function back(){
            
            //每次点击清空一次定时器，避免产生多个定时器，导致无法清空
            clearInterval(times);
            //设置定时器
            times=setInterval(function(){
                //每次执行获取一次距上方的高度
                var Top=document.documentElement.scrollTop;
                if(Top<0){//如果距上方距离小于0，也就是说已经到达顶部
                    clearInterval(times);//清空定时器
                }else{//如果距上方距离不小于0，也就是说还没到达顶部
                    //设置据上方距离比上一次的距离小20
                    document.documentElement.scrollTop=Top-20;
                }
            },100);
        }
    </script>