js回到顶部操作

js回到顶部

页面滚动的距离 scrollTop（纵轴）、scrollLeft( 横轴 )
DOM操作：

document.documentElement.scrollTop //滚动距页头的距离
document.documentElement.scrollLeft //滚动距页左的距离

使得返回顶部操作带有返回效果，而非直接返回顶部，因此设置定时器是必要的 ，利用setInterval();利用定时器控制页面卷动高度，当num值越大时，返回顶部速率越大，或者更改定时时间，但通过更改定时时间更改回到顶部速率，效果上会比较差，效果不流畅，因为受到定时时间的影响，回到顶部会有卡顿感
1.HTML

    <div class="box"></div>
    <button id="top">返回顶部</button>

3.css

		*{
            padding: 0;
            margin: 0;
        }
        .box {
            width: 100%;
            height: 4000px;
            background-image: linear-gradient(to bottom, #2356, #fdff, #3a3a, #6b6b);
        }

        #top {
            position: fixed;
            padding: 10px;
            background-color: slateblue;
            top: 100px;
            right: 0;
        }

2.js

		let topBtn = document.getElementById("top");
        let timer = null;
        let num = 100;
        topBtn.onclick = function () {
            // 设表先关
            clearInterval(timer);
            timer = setInterval(() => {
                document.documentElement.scrollTop -= num;
                if (document.documentElement.scrollTop == 0) {
                    clearInterval(timer);
                }
            }, 20)
        }