<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body{position: relative;margin: 0;padding: 0;}
#box{width: 200px;height: 4000px;background: green;}
#btn{width: 50px;height: 50px;background: red;position: fixed;bottom: 10px;right: 10px;cursor: pointer;}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box")
var btn = document.getElementById("btn");
var timer = null;
window.onscroll = function(){
var scroll_top = document.documentElement.scrollTop ||document.body.scrollTop;
var scrollheight = document.body.scrollHeight;//页高
btn.onclick=function(){
timer = setInterval(function(){
var speed = (0 - scroll_top)/8;
speed = speed>0? Math.ceil(speed):Math.floor(speed);
scroll_top=scroll_top+ speed;
console.log(scroll_top)
document.documentElement.scrollTop=scroll_top;
if(scroll_top<=0){
clearInterval(timer)
}
},30)
}
}
}
</script>
<body>
</html>