【JavaScript】实现返回顶部的效果

css

        #box {
            height: 2000px
        }

        #span {
            position: fixed;
            right: 0;
            bottom: 30px;
            display: block;
            width: 50px;
            height: 50px;
            background: red;
        }

body

    <div id='box'></div>
    <span id='span'></span>

javascript

let span=document.getElementById('span') //获取span标签
//给span绑定点击事件
span.onclick=function(){
    document.documentElement.scrollTop=0
}

带缓慢效果的返回顶部JavaScript

    let span = document.getElementById('span') //获取span标签
    //给span绑定点击事件
    span.onclick = function () {
        let top = parseInt(document.documentElement.scrollTop) //获取当前页面距离浏览器顶部的距离 并转化成整数
        //写一个定时器
        let itemr = setInterval(function () {
            //每次执行定时器 top - 20 
            top -= 20
            // scrollTop = top 来改变现在距离浏览器上边的距离 
            document.documentElement.scrollTop = top
            // 判断 如果top小于0了 就清空定时器
            if (top < 0) {
                clearInterval(itemr)
            }

        }, 50)
    }