<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,ol{
list-style: none;
}
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
}
#ul{
width: 100%;
height: 100%;
}
ul li{
width: 100%;
height: 100%;
}
#ol{
position: fixed;
top: 0;
left: 50px;
}
#ol li{
width: 50px;
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul id="ul">
<li>首页</li>
<li>关注</li>
<li>动态</li>
<li>风格</li>
<li>作品</li>
</ul>
<ol id="ol">
<li>首页</li>
<li>关注</li>
<li>动态</li>
<li>风格</li>
<li>作品</li>
</ol>
</body>
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
var bgcolor = ['pink','cyan','red','orange','green'];
var uli = $('ul').children();
var oli = $('ol').children();
$.each(bgcolor,function(k,v){
uli.eq(k).css('background',bgcolor[k]);
oli.eq(k).css('background',bgcolor[k]);
oli.click(function(){
$.toset(uli,$(this).index())
});
});
var h = window.innerHeight;
var num = 0;
document.onmousewheel=function(e){
if(e.deltaY==100){
if(num<4){
num++;
}
}else{
if(num>0){
num--
}
}
console.log(num)
window.scrollTo(0,num*h);
}
</script>
</html>