BOM特效：返回顶部按钮

最新推荐文章于 2024-10-31 21:09:10 发布

Sarnwan

最新推荐文章于 2024-10-31 21:09:10 发布

阅读量202

点赞数

分类专栏： JavaScript 文章标签： js bom

本文链接：https://blog.youkuaiyun.com/xuehaocyuyan/article/details/119728817

版权

JavaScript 专栏收录该内容

42 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript的BOM特效创建返回顶部的功能。通过改变document.documentElement.scrollTop属性，并结合定时器平滑滚动至页面顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BOM特效开发：返回顶部按钮制作

BOM特效开发：返回顶部按钮制作，改变document.documentElement.scrollTop属性，结合定时器逐步改变此值以动画形式返回顶部

在这里插入代码片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM特效：返回顶部按钮</title>
    <style>
        body {
            height: 3000px;
            background-image: linear-gradient(to bottom, red, yellow, green, blue);
        }

        #topbtn {
            width: 60px;
            height: 60px;
            background-color: rgba(255, 255, 255, .6);
            cursor: pointer;
            position: fixed;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>

<body>
    <!-- 制作返回顶部特效 -->
    <div id="topbtn">返回顶部</div>
</body>
<script>
    var topbtn = document.getElementById('topbtn')
    // 定时器
    var timer
    topbtn.onclick = function () {
        // 清除定时器，防止定时器叠加
        clearInterval(timer)
        timer = setInterval(function () {
            // 使 document.documentElement.scrollTop减少
            document.documentElement.scrollTop -= 100
            // 到达顶部，清除定时器
            if (document.documentElement.scrollTop <= 0) {
                clearInterval(timer)
            }
        }, 20);
    }
</script>

</html>