创建一个页面下拉一定程度,出现返回顶部的按钮

  最近学习了一个简单的返回顶部按钮的实现,下面分享给大家:

CSS代码

#myBtn {
            display: none;/* 默认隐藏 */
            position: fixed;
            bottom: 20px;
            right: 30px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: deepskyblue;/* 设置背景颜色,你可以设置自己想要的颜色或图片 */
            color: white;/* 文本颜色 */
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;/* 圆角 */
        }

            #myBtn:hover {
                background-color: #555;
            }


JavaScript代码

<script>
        // 当网页向下滑动 20px 出现"返回顶部" 按钮
        window.onscroll = function () { scrollFunction() };

        function scrollFunction() {
            console.log(121);
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("myBtn").style.display = "block";
            } else {
                document.getElementById("myBtn").style.display = "none";
            }
        }

        // 点击按钮,返回顶部
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>


HTML代码

<button onclick="topFunction()" id="myBtn" title="回顶部"><b>返回顶部b>button>


效果图如下:
一开始没有,下拉页面右下角出现
创建一个页面下拉一定程度,出现返回顶部的按钮_第1张图片

    我的分享结束了,希望有帮助到你哦。

你可能感兴趣的:(创建一个页面下拉一定程度,出现返回顶部的按钮)