js变速回到顶部

最新推荐文章于 2024-07-28 20:27:10 发布

优降宁

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量594

点赞数 3

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/yjnlovepy/article/details/128659295

版权

<!DOCTYPE html>
<html>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>domo</title>
        <style>
           .top{
            width: 100%;
            height: 200px;
            background-color: red;
            }
            .body{
                height: 10000px;
                width: 100%;
                background-color: yellow;
            }
            #box {
                width: 100px;
                height: 100px;
                position: fixed;
                top: 100px;
                right: 100px;
                opacity: 0;
                background: blue;
            }
        </style>
    </head>
 
    <body>
        <div class="top"></div>
        <div class="body"></div>
        <div id="box"></div>
 
        <script>
            
            window.onscroll = function () {
                juli=document.documentElement.scrollTop;
                if(juli>200){
                    box.style.opacity=1;
                }
                box.onclick=function(){
                    juli=document.documentElement.scrollTop;
                    var move=setInterval(function(){
                        juli=juli/2;
                        if(juli<=300){
                            clearInterval(move)
                            document.documentElement.scrollTop=0
                        }
                        else{
                            document.documentElement.scrollTop=juli
                        }
                    },200)/
                }
            }
                        
        </script>
        
            
    </body>
 
</html>

样式展示

回顶部