代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div {
width: 100px;
height: 150px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
// window.onscroll 滚动页面时触发
window.onscroll=function() {
var oDiv = document.getElementById("div");
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//一般只用前者
startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop));
//clientHeight:内容可视区域的高度,其中变量主要表示高度在页面浏览器所能看到的区域中央
};
var timer=null;//timer一定要放在函数外，clearInterval(timer)才能起作用
function startMove(iTarget){
var oDiv = document.getElementById("div");
clearInterval(timer);//保证函数中永远只有一个定时器，防止效果叠加，比如运动不断加速或透明度不断加大
timer=setInterval(function(){
var speed=(iTarget-oDiv.offsetTop)/4;//4 只是用来设置速度快慢，可以自定义（越大速度越慢）
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//Math.ceil():向上取整；Math.floor()向下取整；取整speed是为了防止speed和iTarget有误差而导致窗口在悬浮位置抖动
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}else{
document.title=iTarget;//获取当前目标的值
document.getElementById("txt").value=oDiv.offsetTop;
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
},30);
}
</script>
</head>
<body style="height:2000px;">
<input type="text" id="txt" style="position:fixed; right:0; top:0;"/>
<div id="div"></div>
</body>
</html>
运行结果：
初始界面：
不断滑动页面滚动条之后界面：
原标题：运动——对联悬浮框
关键词：
我知道了 