1.屏幕滚动原因
document.documentElement.clientHeight-head.offsetHeight
即内容区上升浏览器展示区域的总高度（documentElement) - 头部的高度的值(head.offsetHeight)。
2.主要代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 清除滚动条*/
html,body{height: 100%;/*overflow: hidden;*/}
html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
/*display相关属性值：
none:此元素不会被显示。
block:此元素将显示为块级元素，此元素前后会带有换行符。
inline:默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block:行内块元素。*/
/*text-decoration: none;去除a标签下划线;*/
a{text-decoration: none;display: block;}
li{list-style: none;}/* 去除li前边的点*/
img{display: block;}/*把img设置为块级元素 */
/* 如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div因
* *为内部没有clear，导致不能撑开,所以使用清除浮动解决这个问题。*/
.clearfix{*zoom: 1;}
.clearfix:after{content: "";display: block;clear: both;}
/*头部的包裹区域*/
#head{width: 100%;height: 80px;position: relative;}
/*头部布局中的主体内容*/
#head>.headerMain{width: 1100px;height: 100%;position: relative;
margin: 0 auto;}
#head>.headerMain>.logo{float: left;margin-top: 30px;}
#head>.headerMain>#nav{float: right;margin-top: 50px;}
#head>.headerMain>#nav>.list li{float: left;margin-left: 40px;position: relative;}
#head>.headerMain>#nav>.list li .up{position: absolute;color: black;width: 0;overflow: hidden;
transition: 2s width;}
#head>.headerMain>#nav>.list li:hover .up{width: 100%;}
#head>.headerMain>.arrow{width: 21px;height: 11px;background: url(img/arrow.png) no-repeat;
position: absolute;left: 50%;bottom: -11px;z-index: 2;transition: 2s left;}
/*内容区的操作*/
#wrap>.content{width: 100%;background: darkgrey;position: relative;overflow: hidden;}
/*list充满content*/
#wrap>.content>.list{position: relative;width: 100%;left:0;top: 0;transition: 2s top;}
#wrap>.content>.list li{width: 100%;position: relative;/*border: 3px solid red;*/background-position: 50% 50% !important;}
#wrap>.content>.list li div{width: 1100px;height: 520px;background: orange;
position:absolute;left: 0;right:0;top:0;bottom:0;margin: auto;}
/*给每一屏加入背景图片*/
#wrap>.content>.list li:nth-child(1){background: url(img/bg1.jpg)no-repeat;}
#wrap>.content>.list li:nth-child(2){background: url(img/bg2.jpg)no-repeat;}
#wrap>.content>.list li:nth-child(3){background: url(img/bg3.jpg)no-repeat;}
#wrap>.content>.list li:nth-child(4){background: url(img/bg4.jpg)no-repeat;}
#wrap>.content>.list li:nth-child(5){background: url(img/bg5.jpg)no-repeat;}
/*#wrap>.content>.list li:nth-child(1){background:url(img/bg1.jpg)no-repeat;}
#wrap>.content>.list li:nth-child(2){background:url(img/bg.jpg)no-repeat;}
#wrap>.content>.list li:nth-child(3){background:url(img/bg3.jpg)no-repeat;}
#wrap>.content>.list li:nth-child(4){background:url(img/bg4.jpg)no-repeat;}*/
</style>
</head>
<body>
<section id="wrap">
<!--头部布局-->
<header id="head">
<div class="headerMain">
<!--logo-->
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav id="nav">
<ul class="list clearfix">
<li>
<a href="javascript:void(0)">
<div class="up"><img src="img/home_b.png"/></div>
<div class="down"><img src="img/home.png"/></div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="up">Course</div>
<div class="down">Course</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="up">Works</div>
<div class="down">Works</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="up">About</div>
<div class="down">About</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<div class="up">Team</div>
<div class="down">Team</div>
</a>
</li>
</ul>
</nav>
<!--小箭头-->
<div class="arrow"></div>
</div>
</header>
<!--主体内容区 ,section class="content":是内容区的显示区域-->
<section class="content">
<!--ul用来包裹PC项目中的每一屏，每一个li就是一屏,div是每一屏中的内容区-->
<ul class="list">
<li class="home">
<div>home</div>
</li>
<li class="course">
<div>course</div>
</li>
<li class="works">
<div>works</div>
</li>
<li class="about">
<div>about</div>
</li>
<li class="team">
<div>team</div>
</li>
</ul>
</section>
</section>
</body>
<script type="text/javascript">
window.οnlοad=function(){
//获取所以得菜单标签li
var headLis=document.querySelectorAll("#head>.headerMain>#nav>.list li");
//获取所以得菜单标签li下的up元素
var headLiUps=document.querySelectorAll("#head>.headerMain>#nav>.list li .up");
var arrow=document.querySelector("#head>.headerMain>.arrow");
//内容区的相关对象
var head=document.querySelector("#wrap>#head");
//内容区的显示区域
var content=document.querySelector("#wrap>.content");
//内容区的所有li 渠道
var contentLis=document.querySelectorAll("#wrap>.content>.list li");
//1.头部操作
//初始化的时候让第一个按钮默认选中
//6
var contentUl=document.querySelectorAll("#wrap>.content>.list ");
//记录当前屏的索引
var now=0;
headBind();
//封装
function headBind(){
headLiUps[0].style.width="100%";
//设置初始化的时候小箭头的位置
arrow.style.left=headLis[0].offsetLeft+headLis[0].offsetWidth/2-arrow.offsetWidth/2+"px";
//给每一个菜单按钮一个点击事件
for(var i=0;i<headLis.length;i++){
//给每一个li一个属性index，属性值为该li的下标值
headLis[i].index=i;
headLis[i].οnclick=function(){
//this.index当前点击按钮的下标值
move(this.index);
//记录当前点击菜单项的索引
now=this.index;
}
}
}
//关于内容区的操作
//加载完成调用
contentBind();
function contentBind(){
//设置内容区的展示区域的高度
//documentElement.clientHeight获取浏览器展示区域的总高度
content.style.height=document.documentElement.clientHeight-head.offsetHeight+"px";
//设置ul 下li的高度。一个li就是px项目中的每一屏
for(var i=0;i<contentLis.length;i++){
contentLis[i].style.height=document.documentElement.clientHeight-head.offsetHeight+"px";
}
}
//屏幕分辨率发生改变时触发的事件
window.οnresize=function(){
comtentBind();
//不管浏览器分辨率怎么改变，小箭头总是指向当前点击的菜单项
arrow.style.left=headLis[now].offsetLeft+
headLis[now].offsetWidth/2-arrow.offsetWidth/2+"px";
//不管浏览器的分辨率怎么改变，都是只会出现一屏
contentUl.style.top=-now*(document.documentElement.clientHeight-head.offsetHeight)+"px";
}
//定义核心函数 可对箭头，颜色操作
function move(index){
for (var i=0;i<headLiUps.length;i++) {
//一下代码值为0的话，鼠标放置在li上的时候，hover的css不起作用
headLiUps[i].style.width="0";
}
//让小箭头移动到当前点击按钮的居中位置
arrow.style.left=headLis[index].offsetLeft+
headLis[index].offsetWidth/2-arrow.offsetWidth/2+"px";
headLiUps[index].style.width="100%";
//点击菜单进入相应的屏幕中
contentUl.style.top=-index*(document.documentElement.clientHeight-head.offsetHeight)+"px";
}
}
</script>
</html>
