<!DOCTYPE html>
<html>
<head>
<title>楼层跳跃式的页面布局</title>
<meta charset=
"utf-8"
>
<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:200px;
left: 50px;
}
ol li{
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 type=
"text/javascript"
src=
"myScroll.js"
></script>
<script type=
"text/javascript"
>
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;
clearInterval(timer);
timer = setInterval(
function
(){
var
step = (target-leader)/10;
step = step > 0 ? Math.
ceil
(step) : Math.
floor
(step);
leader = leader + step;
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;
}
}
</script>
</body>
</html>