<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>