返回顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body{
            height: 5000px;
            background-image: linear-gradient(to bottom,blue,green,yellow);
        }

        .backtotop {
            width: 60px;
            height: 60px;
            background-color: rgba(255,255,255.6);
            position: fixed;
            bottom: 100px;
            right: 100px;
            cursor: pointer;
        }


    </style>
</head>
<body>
   
     <div class="backtotop" id="backtotop"> 返回顶部 </div>

     <script>
         var backtotop = document.getElementById('backtotop')
         var timer
         backtotop.onclick = function(){
               clearInterval(timer)
               timer =  setInterval(function(){
                    document.documentElement.scrollTop -= 200
                    if(document.documentElement.scrollTop <= 0 ){
                        clearInterval(timer)
                    }
            },20)
         }

     </script>
</body>
</html>
posted @ 2021-12-11 15:01  13522679763-任国强  阅读(18)  评论(0)    收藏  举报