Js效果：楼层跳跃

实现思路

布局

Html

<ul class="nav">
<li>享受品质</li>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
</ul>
<ul class="content">
<li>享受品质</li>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
</ul>

CSS

<style>
*{margin:0;padding:0;}
li{
list-style: none;
color: #FFFFFF;
}
.nav{
position: fixed;
left: 15px;
top: 80px;
}
.nav li{
width: 70px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
cursor: pointer;
background: #666;
color: #FFFFFF;
}
.nav .now{
background: lightcoral;
}
html, body{
height: 100%;
}
ul{
height: 500%;
}
.content li{
height: 20%;
font: 100px "Microsoft YaHei";
text-align: center;
}

</style>

JS实现

<script>
var navLiArr = $('ul')[0].children;
var contentLiArr = $('ul')[1].children;

//给每个不同楼层添加不同的颜色
var colorArr = ['lightgreen','lightseagreen','lightskyblue',
'lightgray','lightyellow'];

for (var i=0; i<contentLiArr.length;i++){
contentLiArr[i].style.background = colorArr[i];
}
// 点击转到对应的楼层
for (var i=0;i<navLiArr.length;i++){
navLiArr[i].index=i;
navLiArr[i].onclick=click;
}

function click () {
//改变样式
var parent=this.parentNode;
parent.isclick=true;
for(var j = 0; j <navLiArr .length; j++ ){
navLiArr[j].className='';
}
this.className='now';
var dis=this.index*document.body.offsetHeight*1;
clearInterval(window.timer);
window.timer=setInterval(function () {
var pos=(dis-scroll().top)/10;
pos=pos>0?Math.ceil(pos):Math.floor(pos);
window.scrollTo(0,scroll().top+pos);
if(dis==scroll().top){
clearInterval(window.timer);
parent.isclick=false;
}
})

}

window.onscroll=function (ev) {
// console.log(ev)
if(!navLiArr[0].parentNode.isClick){
//滚动到相应板块  改变样式
//获取滚动距离 scroll（）。top
var dis=document.body.offsetHeight;
var topDis=scroll().top;
var t=topDis/dis;
//t 与 navLiArr[i].index 比较
t=Math.round(t);
console.log(t);
for(var k = 0; k <navLiArr .length; k++ ){
navLiArr[k].className='';
}
navLiArr[t].className='now';
}
}
</script>