js控制頁面每次滾動一屏，和樓梯效果

我最近在做我們公司官網的改版，產品中心就是每次滾一屏的，我覺得加上樓梯更方便用戶瀏覽，就隨便寫了個demo，

先來看看結構，都很簡單的

　　　　　　<!--樓梯-->
		<ul class="louti">
			<li class="active">第1屏</li>
			<li>第2屏</li>
			<li>第3屏</li>
			<li>第4屏</li>
			<li>第5屏</li>
		</ul>
		<!--內容-->
		<div class="content">
			<div style="background-color: #87CEFB" class="ping staircase">
				<div>這是第1屏</div>
			</div>
			<div style="background-color: #FFC0CB" class="ping staircase">
				<div>這是第2屏</div>
			/div>
			<div style="background-color:#BAD5FF" class="ping staircase">
				<div>這是第3屏</div>
			</div>
			<div style="background-color: #3CB379" class="ping staircase">
				<div>這是第4屏</div>
			</div>
			<div style="background-color: #AFEEEE" class="ping staircase">
				<div>這是第5屏</div>
			</div>
		</div>

再來點簡單的CSS

			html,body {
				height: 100%;
			}
			body {
				margin: 0;
			}
			.content{height: 100%;}
			.content .ping {
				height: 100%;
			}
			li{
				list-style: none;
			}
			.louti{
				position: fixed;
				top: 25%;
				right: 3%;
			}
			.louti li{
				width: 100px;
				text-align: center;
				border: 1px solid #F5F5F5;
				height: 80px;
				line-height: 80px;
				cursor: pointer;
			}
			.louti li:nth-child(n+2){
				border-top: none;
			}
			.louti li.active{
				background: burlywood;
				color: white;
			}

接下倆就是JS了，

			//內容一屏一屏的滾動
			document.addEventListener("DOMContentLoaded", function() {
				var body = document.body;
				var html = document.documentElement;
				var itv, height = document.body.offsetHeight;
				var page = scrollTop() / height | 0;
				addEventListener("resize", onresize, false);
				onresize();

				//鼠標滾輪事件  
				document.body.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) {
					clearTimeout(itv);
					itv = setTimeout(function() {
						//判斷滾輪滾的方向  
						var delta = e.wheelDelta / 120 || -e.deltaY / 3;
						page -= delta;
						var max = (document.body.scrollHeight / height | 0) - 1;
						if(page < 0) {
							return page = 0;
						}
						if(page > max) {
							return page = max;
						}
						move();
					}, 100);
					e.preventDefault();
				});
				//當窗體發生變化時還是保證每次滾動滾一屏  
				function onresize() {
					height = body.offsetHeight;
					move();
				};

				function move() {
					var value = height * page;
					var diff = scrollTop() - value;
					(function callee() {
						diff = diff / 1.2 | 0;
						scrollTop(value + diff);
						if(diff) {
							itv = setTimeout(callee, 16);
						}
					})();
				};

				function scrollTop(v) {
					if(v == null) {
						return Math.max(body.scrollTop, html.scrollTop);
					} else {
						body.scrollTop = html.scrollTop = v;
					}
				}
			})
			
			//點擊樓層按鈕跳到相應的樓層
			var isMove=false;
			//點擊右側導航條
			$(".louti li").on("click",function(){
				isMove=true;
				//按鈕變化
				$(this).removeClass().addClass("active").siblings("li").removeClass("active");
				//樓梯移動
				var index=$(this).index();
				var _topp=$(".staircase").eq(index).offset().top;
				$("html,body").stop().animate({scrollTop:_topp},200,function(){
					isMove=false;
				})
			})
			//樓梯滾動導航條相對移動
			$(window).scroll(function(){
				//判斷是否在滾動，如果沒有，則支執行這里的代碼
				if(!isMove){
					//獲取滾動距離
					var _scrollTop=$(document).scrollTop();
					//遍歷所有樓梯
					$(".staircase").each(function(){
						var _topp=$(this).offset().top;
					
						//判斷滾動距離是否大於樓梯的top值
						if(_scrollTop>=_topp){
							var index=$(this).index();
							$(".louti li").eq(index).removeClass().addClass("active")
							.siblings("li").removeClass("active");
							
						}
					})		
				}
			})