js实例：滚动条缓动回到顶部

最新推荐文章于 2023-03-30 23:35:36 发布

QQ帝国

最新推荐文章于 2023-03-30 23:35:36 发布

阅读量1.4k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/QQ_Empire/article/details/80530672

版权

JavaScript 专栏收录该内容

121 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{position: relative;margin: 0;padding: 0;}
#box{width: 200px;height: 4000px;background: green;}
#btn{width: 50px;height: 50px;background: red;position: fixed;bottom: 10px;right: 10px;cursor: pointer;}
</style>
</head>
<body>


<div id="box"></div>
<div id="btn"></div>
</body>

    <script>
            window.onload = function(){
            var box = document.getElementById("box")
               var btn = document.getElementById("btn");
               var timer = null;
            window.onscroll = function(){
                var scroll_top = document.documentElement.scrollTop ||document.body.scrollTop;
                var scrollheight = document.body.scrollHeight;//页高
                
                btn.onclick=function(){
                    clearInterval(timer)
                timer = setInterval(function(){
                var speed = (0 - scroll_top)/8;
                speed = speed>0? Math.ceil(speed):Math.floor(speed);
                scroll_top=scroll_top+ speed;
                    console.log(scroll_top)
                document.documentElement.scrollTop=scroll_top;
                if(scroll_top<=0){
                clearInterval(timer)
                }
                },20)
                
                
                
                }
            
            
            
            }
            
            
            
            
            
            }
            
            
     </script>


</html>>