jq-回到顶部集合

<style>
        body {
            height: 2000px;
        }

        div {
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            font-size: 14px;
            color: brown;
            position: fixed;
            left: 700px;
            top: 500px;
            display: none;
        }
    </style>

  <div>回到顶部</div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>


        $("div").click(() => {
            //1.瞬间滚动到顶部
            // $('html,body').scrollTop(0);



            //2.匀速滚动
            // //总时间
            // var time = 500;
            // //间隔事件
            // var setTime = 30;
            // //滚动长度
            // var dis = $('html').scrollTop()
            // //滚动次数
            // var item = dis/(time/setTime)
            // var clear = setInterval(() => {
            //     dis -= item
            //     if (dis<1) {
            //         clearInterval(clear)
            //     }
            //     $('html').scrollTop(dis)
            // }, setTime);


            //3.加速滚动
            //滚动长度
            var clear = setInterval(() => {
                var dis = $('html').scrollTop()
                var speed = Math.floor(dis / 5)
                if (speed < 1) {
                    dis = 0
                    clearInterval(clear)
                }
                $('html').scrollTop(dis - speed)
            }, 30);

        })


        window.onscroll = function () {
            if ($('html').scrollTop() > 400) {
                $("div").css("display", "block")
            } else {
                $("div").css("display", "none")
            }
        }


        // 4： 动画
        //         $(window).scroll(() => {
        //     if ($(window).scrollTop() > 400) {
        //         $('div').show()
        //     }
        //     else {
        //         $('div').hide()
        //     }
        // })

        // $('div').click(() => {
        //     $('html,body').animate({
        //         scrollTop: 0
        //     }, 500)
        // })
    </script>