<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#top{
100px;
height: 100px;
background: red;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body style="height: 3000px;">
<div id="top"></div>
<script type="text/javascript">
var oTop = document.getElementById("top");
var obj = null;
oTop.onclick = function(){
if( document.documentElement.scrollTop ){
obj = document.documentElement;
}else{
obj = document.body;
}
var num = obj.scrollTop;
var timer = setInterval(function(){
num -= 200;
if( num <= 0 ){
num = 0;
obj.scrollTop = num;
clearInterval( timer );
}
obj.scrollTop = num;
},30);
}
</script>
</body>
</html>