返回顶部按钮 js普通函数版/class构造函数版/JQ版

本文链接：https://blog.youkuaiyun.com/weixin_45249263/article/details/123773101

本文的返回顶部有两种版本：①js普通函数版； ②class构造函数版；③JQuery版

话不多说直接上代码！（其中样式较简陋，引用时可以自己根据需要来修改样式）

①JS普通函数封装好的返回顶部版本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01backTop</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 3000px;
        }

        .goTop {
            width: 30px;
            height: 30px;
            background-color: rgb(0, 183, 255);
            position: fixed;
            right: 50px;
            bottom: 50px;

            display: none;
        }
    </style>
</head>

<body>
    <div class="goTop"></div>

    <script>
        /*
        * @show 为滚动到哪里开始显示出置顶按钮
        * @speed 为返回顶部的速度（数值越大速度越快，20-60为最佳值，过快会影响体验感）
        */
        function backTop(show=500,speed=30) {
            // 定义一个置顶按钮载体
            const goTop = document.querySelector(".goTop")

            // 置顶按钮的隐藏/显示
            window.onscroll = function () {
                if (window.scrollY > show) {
                    goTop.style.display = "block"
                } else {
                    goTop.style.display = "none"
                }
            }

            // 绑定置顶时间，并在置顶后清除间隔定时器
            goTop.onclick = function () {
                let timeID = setInterval(
                    function () {
                        document.documentElement.scrollTop -= speed
                        console.log(document.documentElement.scrollTop);

                        if (document.documentElement.scrollTop === 0) {
                            clearInterval(timeID)
                        }
                    }, 10
                )
            }
        }
        backTop()
    </script>
</body>

</html>

②Class构造函数 封装的返回顶部版本

这是引用class构造函数的示范html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01backTop_test</title>
    <script src="./01backTop_park.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 3000px;
        }

        .goTop {
            width: 30px;
            height: 30px;
            background-color: rgb(0, 183, 255);
            position: fixed;
            right: 50px;
            bottom: 50px;

            display: none;
        }
    </style>
</head>
<body>
    <div class="goTop"></div>
    <script>
        const goTop = document.querySelector(".goTop")
        new BackTop(goTop,600,50)
    </script>
</body>
</html>

这是Class构造函数的 js 代码

class BackTop {
    constructor(domRoot, show, speed) {
        this.goTop = domRoot
        this.show = show
        this.speed = speed
        this.scrollEvent()
        this.bindEvent()
    }

    // 置顶按钮的隐藏/显示
    scrollEvent() {
        window.onscroll = () => {
            if (window.scrollY > this.show) {
                goTop.style.display = "block"
            } else {
                goTop.style.display = "none"
            }
        }
    }

    bindEvent() {
        goTop.onclick = () => {
            let timeID = setInterval(
                () => {
                    document.documentElement.scrollTop -= this.speed
                    if (document.documentElement.scrollTop === 0) {
                        clearInterval(timeID)
                    }
                }, 10
            )
        }
    }
}

③JQuery版本（该版本较简单，不做过多解释）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>返回顶部——JQuery版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 3000px;
        }

        .goTop {
            width: 30px;
            height: 30px;
            background-color: pink;
            position: fixed;
            right: 50px;
            bottom: 50px;

            display: none;
        }
    </style>
</head>

<body>
    <div class="goTop"></div>

    <script src="../jquery/jquery-3.6.0.js"></script>

    <script>
        $(window).scroll(function () {
            if ($(this).scrollTop() > 500) {
                $(".goTop").css({ display: "block" })
            } else {
                $(".goTop").css({ display: "none" })
            }
        })

        $(".goTop").click(function () {
            $("html").animate(
                { scrollTop: 0 },
                500,
                () => console.log("动画完成")
            )
        })

    </script>
</body>

</html>