原生JS实现回到顶部动画

最新推荐文章于 2024-04-20 11:50:28 发布

weiyouki

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量566

点赞数 1

分类专栏：原生Javascript 文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_44233842/article/details/107914376

版权

原生Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

点击按钮回到页面顶部这是个在日常开发中经常用的效果，今天，就用原生Javascript来实现

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

        .top {
            width: 300px;
            height: 300px;
            background: #f40;
            line-height: 300px;
            cursor: pointer;
        }
    </style>
    <body>
        <div class="top"></div>
    </body>

let divtop = document.getElementsByClassName("top")[0]
        divtop.addEventListener("click", function () {
            let timer = setInterval(() => {

                // 获取滚动条高度
                let wTop = document.documentElement.scrollTop || document.body.scrollTop;

                // 上升速度
                let speed = Math.floor(-wTop / 5)

                // 上升过程中逐步获取滚动条高度
                document.documentElement.scrollTop = document.body.scrollTop = wTop + speed;

                // 到顶部时.停止
                if (wTop === 0) {
                    clearInterval(timer)
                }
            }, 30)
        })

weiyouki

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现回到顶部动画

点击按钮回到页面顶部这是个在日常开发中经常用的效果，今天，就用原生Javascript来实现<style> * { margin: 0; padding: 0; } .top { width: 300px; height: 300px; background: #f40; line-height: 30
复制链接

扫一扫