回到顶部的按钮

最新推荐文章于 2021-12-07 18:28:32 发布

原创

最新推荐文章于 2021-12-07 18:28:32 发布 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

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

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

布局非常简单！

就定在右下角呗！

当点击的时候，让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;
                }

               var oBtn = document.getElementById('back');
            
               // 当

最低0.47元/天解锁文章