Click the button to return to the top (H5+JS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回到顶部</title>
</head>
<style>

    /*鼠标滑动20px后显示定值按钮*/
    #btnTop {
      
      
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        border: none;
        outline: none;
        background-color: #89cff0;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 10px;
    }

    #btnTop:hover {
      
      
        background-color: #1E90FF;
    }

    .a {
      
      
        margin-top: 100px;
        background-color: wheat;
        width: 1000px;
        height: 200px;
    }

    .b {
      
      
        background-color: silver;
        width: 1000px;
        height: 600px;
    }

    .c {
      
      
        background-color: firebrick;
        width: 1000px;
        height: 600px;
    }

    div {
      
      
        margin: 5px auto;
    }

    img {
      
      
        margin: 40px 100px;
    }

    /*鼠标悬停放大延时秒*/
    div img {
      
      
        cursor: pointer;
        transition: all 0.7s;
    }

    /*鼠标悬停放大倍数*/
    div img:hover {
      
      
        transform: scale(1.5);
    }
</style>
<body>


<div class="a">
    <img src="../PublicImg/Number/2.jpg" height="150"/>
</div>
<div class="b">
    <img src="../PublicImg/Number/3.jpg" height="313"/>
</div>
<div class="c">
    <img src="../PublicImg/Number/4.jpg" height="313"/>
</div>
<button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button>
<script>


    //回到顶部滑动效果
    window.onscroll = function () {
      
      
        scrollFunction()
    };

    var timer = null;
    btnTop.onclick = function () {
      
      
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn() {
      
      
            var oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (oTop > 0) {
      
      
                document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                timer = requestAnimationFrame(fn);
            } else {
      
      
                cancelAnimationFrame(timer);
            }
        });
    }

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

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

    // 点击按钮，返回顶部
    function returnTop() {
      
      
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }


</script>
</body>
</html>
Click the button to return to the top (H5+JS)

Guess you like
