html==========
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style/main.css">
</head>
<body style="height:1000px">
123
<div id="box">123</div>
</body>
</html>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/demo.js"></script>
css=======
#box{ 100px;height: 100px;background: red url() 0 0 no-repeat;position: absolute;bottom: 0;right: 0;}
js=======
window.onscroll=function() {
var obj=document.getElementById('box');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//obj.style.top=document.documentElement.clientHeight-obj.offsetHeight+scrollTop+"px";
startMove(parseInt((document.documentElement.clientHeight-obj.offsetHeight)/2+scrollTop));
}
var timer=null;
function startMove (target) {
clearInterval(timer);
var obj=document.getElementById('box');
timer=setInterval(function() {
var speed=(target-obj.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(target==obj.offsetTop){
clearInterval(timer);
}else{
obj.style.top=obj.offsetTop+speed+"px";
}
},40);
}