樓梯導航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>樓梯導航</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body, html{height: 100%;}
ul{list-style: none;height: 100%;}
ul li{height: 100%;}
ol{list-style: none;position: fixed;top:0;left: 500px;}
ol li{float:left;width: 50px;height: 50px;border: 1px solid #000;text-align: center;
line-height: 50px;margin-top: -1px;cursor: pointer;}
</style>
</head>
<body>
<ul>
<li>第一區域</li>
<li>第二區域</li>
<li>第三區域</li>
<li>第四區域</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<script>
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLiArr = ul.children;
var olLiArr = ol.children;
var target = 0;
var leader = 0;
var timer = null;
var arrColor = ["green","orange","yellow","red","gold"];
for(var i=0; i<arrColor.length; i++){
ulLiArr[i].style.backgroundColor = arrColor[i];
olLiArr[i].style.backgroundColor = arrColor[i];
olLiArr[i].index = i;
olLiArr[i].onclick =function(){
target = ulLiArr[this.index].offsetTop;
console.log("目標位置偏移target："+target);
clearInterval(timer);
timer = setInterval(function(){
var step = (target-leader)/10;
console.log("步長step："+step);
step = step > 0 ? Math.ceil(step) : Math.floor(step);
console.log("二次步長step："+step);
leader = leader + step;
console.log("到頂部距離leader="+leader);
window.scrollTo(0, leader);
if(Math.abs(target-leader) <= Math.abs(step)){
window.scrollTo(0, target);
clearInterval(timer);
}
}, 25);
};
window.onscroll = function(){
leader = scroll().top;
console.log("區域到頂部距離leader："+leader);
}
}
function scroll() {
if(window.pageYOffset !== undefined) {
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") {
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
</script>
</body>
</html>
