<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{
height: 2000px;}button{
width: 300px;height: 60px;font-size: 30px;position: fixed;right: 5px;bottom: 5px;}</style></head><body>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, maiores. Dolorum rem itaque natus, alias ratione voluptas quo placeat eaque perspiciatis laboriosam inventore. Nam eius atque esse. At, dolor aut!
<button>返回顶部</button><script>functionwin(attr, value){
if(typeof value =='undefined'){
return document.documentElement[attr]|| document.body[attr];}
document.documentElement[attr]= value;
document.body[attr]= value;}</script><script>var body = document.querySelector('body');var btn = document.querySelector('button');
btn.addEventListener('click',function(){
var top = timer =null;
timer =setInterval(function(){
top = document.documentElement['scrollTop'];win("scrollTop", Math.floor(top - top /30));if(top ==0){
clearInterval(timer);}},10);})
window.onload = window.onscroll=function(){
var nowTop =win("scrollTop");
btn.style.display = nowTop <200?"none":"block";}</script></body></html>