计时器实现点击按钮回到页面顶部demo 

<body>
    <!-- 用div做个按钮 -->
    <div id="box">TOP</div>
    <!-- 随意写些标签，让页面出现滚动条，随意写点css样式就行 -->
    <h1>这是标题</h1>
    <h1>这是标题</h1>
    <p></p>
    <h1>这是标题</h1>
    <h1>这是标题</h1>
    <h1>这是标题</h1>
    <p></p>
    <h1>这是标题</h1>
    <h1>这是标题</h1>
    <p></p>
    <h1>这是标题</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h1>这是标题</h1>
    <h1>这是标题</h1>
    <h1>这是标题</h1>
</body>
 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         /* 随意写一下按钮的样式，我把按钮定位在了窗口右侧 */       
 7         #box{            
 8             width: 50px;
 9             height: 80px;
10             background: #ccc;
11             position: fixed;
12             right: 0;
13             top: 200px;
14             text-align: center;
15             line-height: 80px;  
16         }
17         p{
18             width: 100%;
19             height: 80px;
20             background: pink;
21         }
22         ul{
23             width: 500px;
24             height: 400px;
25             background: orange;
26         }       
27     </style>
 1 <script>
 2     // 获取box
 3     var goTop = document.getElementById("box");
 4     // 绑定点击事件
 5     goTop.onclick = function(){
 6         // 设置定时器，并通过var t 拿到计时器的返回值，后面清除计时器要用
 7        var t = setInterval(function() {
 8         //    if判断 滚动条滚动的距离若<=0，说明到了顶端，清除计时器
 9           if(document.documentElement.scrollTop<=0){
10                 clearInterval(t);
11           }else{
12             // 设置每次向上滚动50  
13             document.documentElement.scrollTop -= 50;
14           }  
15         }, 30);
16     }
17 </script>

 

posted @ 2020-05-17 22:44  永亮_workdog  阅读(197)  评论(0)    收藏  举报