js完成全屏楼梯滚动效果（代码完成）

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

再来点简单的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   
关键词：js完成全屏楼梯滚动效果（代码完成）