<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#wrap{
height:2000px;
background:pink;
position:relative;
}
#ontop{
position:absolute;
bottom:0px;
right:0px;
background:red;
color:#FFF;
font-weight:bold;
height:100px;
width:100px;
line-height:100px;
text-align:center;
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var otop = document.getElementById('ontop');
var timer = null;
otop.onclick = function ()
{
timer = setInterval(function()
{
document.body.scrollTop -= 50;
document.documentElement.scrollTop -= 50;
if(document.body.scrollTop == 0 && document.documentElement.scrollTop == 0 )
{
clearInterval(timer);
}
},20)
};
};
</script>
</head>
<body>
<div id="wrap">
<span id="ontop">回到顶部</span>
</div>
</body>
</html>
