<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>获取元素的高度</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑'; font-size:12px;}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{list-style:none;}
#main{1000px; margin:110px auto;}
.p1{1000px; height:230px;border:1px solid red; margin-top:10px;}
.p2{1000px; height:260px;border:1px solid red; margin-top:10px;}
.p3{1000px; height:300px;border:1px solid red; margin-top:10px;}
.p4{1000px; height:230px;border:1px solid red; margin-top:10px;}
.p5{1000px; height:330px;border:1px solid red; margin-top:10px;}
.p6{1000px; height:430px;border:1px solid red; margin-top:10px;}
.p7{1000px; height:300px;border:1px solid red; margin-top:10px;}
.p8{1000px; height:230px;border:1px solid red; margin-top:10px;}
.p9{1000px; height:2300px;border:1px solid red; margin:20px auto;}
#minLi{position:fixed; top:260px; right:25px;}
#minLi li{height:22px;line-height:22px; border:1px solid red; 40px; text-align:center; margin:5px 0; cursor:pointer;}
#minLi li.addnew{
background:red; color:#fff;
}
</style>
</head>
<body>
<div id='main'>
<div class='p1'>开始</div>
<div class='p2'>介绍</div>
<div class='p3'>发展</div>
<div class='p4'>历史</div>
<div class='p5'>事件</div>
<div class='p6'>现状</div>
<div class='p7'>成就</div>
<div class='p8'>结束</div>
</div>
<div class='p9'>~~</div>
<ul id='minLi'>
<li>开始</li>
<li>介绍</li>
<li>发展</li>
<li>历史</li>
<li>事件</li>
<li>现状</li>
<li>成就</li>
<li>结束</li>
</ul>
</body>
<script type="text/javascript">
var oBox = document.getElementById('main');
var oDiv =oBox.children;
var oUl = document.getElementById('minLi');
var oLi = oUl.getElementsByTagName('li');
var arr =[];
var bstop = true;
for(var i=0;i<oDiv.length;i++){
arr.push(getPos(oDiv[i]).top);
}
function getPos(obj) {
var pos = {left:0,top:0};
while(obj) {
pos.left = pos.left+obj.offsetLeft;
pos.top = pos.top+obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
//点击侧边栏
for(var i=0;i<oLi.length;i++){
oLi[i].index = i;
oLi[i].onclick = function(){
if(bstop){
bstop = false;
Move(this,arr[this.index],function(){
bstop = true;
});
}
}
}
window.onscroll = function () {
var iH = document.body.scrollTop || document.documentElement.scrollTop;
var n = getIndex(arr,iH);
for(var i=0;i<oLi.length;i++ ) {
oLi[i].className = '';
}
oLi[n].className = 'addnew';
};
function getIndex(arr, v){
for (var i=0; i<arr.length; i++) {
if (arr[i] >= v) {
return i;
}
}
}
function Move(obj,iTarget,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iH = document.body.scrollTop || document.documentElement.scrollTop;
var ispeed = (iTarget-iH)/6;
ispeed=ispeed>0?30:-30;
if(Math.abs(iH-iTarget)<30){
document.documentElement.scrollTop = document.body.scrollTop = iTarget;
clearInterval(obj.timer);
if(fn) fn();
}else{
document.documentElement.scrollTop = document.body.scrollTop = iH+ispeed;
document.title = iH+ispeed;
}
},30);
}
</script>
</html>
类似时光轴的效果