点击按钮回到顶部（H5+JS）

最新推荐文章于 2024-03-19 10:15:00 发布

广而不精zhu小白

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量1.3k

点赞数

分类专栏： Web 文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_43003203/article/details/121523431

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>

广而不精zhu小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击按钮回到顶部（H5+JS）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>回到顶部</title></head><style> /*鼠标滑动20px后显示定值按钮*/ #btnTop { display: none; position: fixed; bottom
复制链接

扫一扫