[JS 基础应用] 实现回到顶部按钮问题简介：需求：当用户点击“回到顶部”按钮，滚轴逐渐上升 “回到顶部”按钮，当页

问题简介：

需求：

当用户点击“回到顶部”按钮，滚轴逐渐上升
“回到顶部”按钮，当页面无滚动时，图标不显示

1. 效果演示

2. 代码实现

返回顶部代码:

// 点击按钮，返回顶部
function toTop() {
    // 逐渐往上50px
    cancelAnimationFrame(timer) //为了保险，先清除下动画帧（这行代码不加，也能正常运行）

    var scrollTop = document.documentElement.scrollTop;
    document.documentElement.scrollTop = scrollTop - 50
    if (scrollTop > 0) {
        requestAnimationFrame(toTop)
    } else {
        cancelAnimationFrame(timer)
        // timer: 计时器
    }
}

var timer = null

query('#back-top').onclick = function () {
    // 请求动画帧
    timer = requestAnimationFrame(toTop)
}

document.documentElement.scrollTop = 窗口顶部距离页面顶部的距离

requestAnimationFrame 建立动画帧(如果不用动画帧,看起来画面就是一卡一卡的)

按钮灵活显示代码:

window.onscroll = function () {
    if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
        // 这里设置成flex是为了保证样式，一般设置成block即可
        query("#back-top").style.display = "flex";
    }
    else {
        query("#back-top").style.display = "none";
    }
}

当滚动滚动条时,会触发window.onscroll绑定的函数.

当滚动条到一定的距离时,会触发该函数.

3. 完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #back-top {
            display: none;
            width: 80px;
            height: 90px;
            background-color: #1781bd;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: fixed;
            bottom: 60px;
            right: 40px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="back-top">
        <div>
            <!-- 图片 -->
            <svg t="1641960860642" class="icon" viewBox="0 0 1824 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2121" width="20" height="20">
                <path
                    d="M0 911.607042 911.607042 0l911.607042 911.607042-112.392958 112.392958L911.607042 224.901647 112.392958 1024 0 911.607042z"
                    p-id="2122" fill="#ffffff"></path>
            </svg>
        </div>
        回到顶部
    </div>

    <div style="height: 9000px;"></div>

    <script>
        const query = (e, isSingleElement = true) => isSingleElement ? document.querySelector(e) : document.querySelectorAll(e);

        window.onscroll = function () {
            if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
                // 这里设置成flex是为了保证样式，一般设置成block即可
                query("#back-top").style.display = "flex";
            }
            else {
                query("#back-top").style.display = "none";
            }
        }

        // 点击按钮，返回顶部
        function toTop() {
            // 逐渐往上50px
            cancelAnimationFrame(timer) //为了保险，先清除下动画帧（这行代码不加，也能正常运行）

            var scrollTop = document.documentElement.scrollTop;
            document.documentElement.scrollTop = scrollTop - 50
            if (scrollTop > 0) {
                requestAnimationFrame(toTop)
            } else {
                cancelAnimationFrame(timer)
                // timer: 计时器
            }
        }

        var timer = null

        query('#back-top').onclick = function () {
            timer = requestAnimationFrame(toTop)
        }

    </script>
</body>

</html>