回到顶部的按钮

最新推荐文章于 2025-05-04 12:55:46 发布

爱生活，爱编程

最新推荐文章于 2025-05-04 12:55:46 发布

阅读量1.6k

点赞数 1

分类专栏： javascript基础笔记

本文链接：https://blog.csdn.net/qq_15009739/article/details/103699107

版权

本文介绍了如何在页面右下角添加一个返回顶部的按钮，点击后利用简单的缓冲动画将页面平滑滚动回顶部。布局定位在右下角，动画实现通过setInterval()函数，逐步减少scrollTop值，直至其等于0，完成返回顶部的过程。虽然未深入讲解动画原理，但后续会进一步探讨相关知识点。

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

这个一般都是在页面比较高，一般右下角就有个按钮，一点就回到了页面的顶部！

布局非常简单！

就定在右下角呗！

当点击的时候，让scrollTop 值准建变为0 !(用到简单的缓冲动画）

 <script>
        window.onload = function(){

                var flag = false; // false 为手动值， true 为自动值！
                var timer = null;
                window.onscroll = function(){
                    // 如果是手动的！
                    if(!flag){
                        if(timer!=null){
                            clearInterval(timer);        
                        }
                    }
                    flag = false;