js返回顶部小功能实现(右侧菜单栏)_网站右侧在线客服公众号返回顶部多功能悬浮菜单栏js插件-CSDN博客

本文链接：https://blog.csdn.net/Sk22582/article/details/126999788

很多网站,包括小程序,商城等都会有一个按钮.点回到页面顶部.一起看看吧!

html部分代码

<style>
        * {
            padding: 0;
            margin: 0;
        }

        span {
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 10%;
            background-color: grey;
            color: #fff;

            position: fixed;
            right: 30px;
            bottom: 50px;

            text-align: center;
            line-height: 50px;


            display: none;

            user-select: none;
        }
    </style>

<body style="height:3000px;background: linear-gradient(pink,blue);">
    <span>▲</span>
</body>

js部分代码:

    <script>
        // 页面的总高度 = 首屏页面的高度 + 其它屏页面的高度
        // 页面的总高度 = 可视区域高度  +  滚动条滚动最大距离

        // 获取span
        var span = document.querySelector("span");

        // 获取首屏页面高度 （可视区域高）
        var winH = document.documentElement.clientHeight;

        // 绑定滚动事件
        window.onscroll = function () {
            // 获取滚动条滚动距离
            var scrollT = document.documentElement.scrollTop;
            // console.log(winH,scrollT,winH+scrollT);
            // 判断  首屏高度 + 滚动条滚动距离 >= 2200 展示
            if ((winH + scrollT) >= 2200) {
                span.style.display = "block";
            } else {
                span.style.display = "none";
            }
        };


        // 回到顶部
        span.onclick = function () {
            // 防止用户多次点击先清除定时器
            clearInterval(span.timer);
            // 设置定时器
            span.timer = setInterval(function () {
                // 获取滚动条滚动距离
                var scrollT = document.documentElement.scrollTop;

                // 在当前的基础上 减去一个固定的值 
                scrollT -= 200;

                // 清除定时器
                if (scrollT <= 0) {
                    clearInterval(span.timer);
                }
                // console.log(scrollT);
                // 设置
                document.documentElement.scrollTop = scrollT;

            }, 30);
        }
    </script>

实现效果如图: