为什么用document.documentElement.scrollTop ，top还是为0

为什么用document.documentElement.scrollTop ，top还是为0

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>慕课手机实例</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<header class="header">
<div class="header__wrap">
<div class="header__logo">慕课手机</div>
<nav class="header__nav">
<a href="#" class="header__nav-item header__nav-item_active">首页</a>
<a href="#" class="header__nav-item">外观</a>
<a href="#" class="header__nav-item">配置</a>
<a href="#" class="header__nav-item">型号</a>
<a href="#" class="header__nav-item">说明</a>
<a href="#" class="header__nav-item header__nav-item_button">立即购买</a>
<div class="header__nav-tip"></div>
</nav>
</div>
</header>
<!-- 第一屏 -->
<div class="screen-1">
<h2 class="screen-1__heading"><b>慕课手机</b> 让你的生活更精彩</h2>
<div class="screen-1__phone"></div>
<div class="screen-1__shadow"></div>
</div>
<!-- 第二屏 -->
<div class="screen-2">
<h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
<h3 class="screen-2__subheading">采用受欢迎的设计，让它更加出色。<br>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
<div class="screen-2__phone">
<div class="screen-2__point screen-2__point_1">高清摄像</div>
<div class="screen-2__point screen-2__point_2 screen-2__point_right">超薄机身</div>
<div class="screen-2__point screen-2__point_3 screen-2__point_right">大屏显示</div>
</div>
</div>
<!-- 第三屏 -->
<div class="screen-3">
<div class="screen-3__wrap">
<h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>
<h3 class="screen-3__subheading">采用受欢迎的设计，让它更加出色。<br>
款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
<div class="screen-3__phone"></div>
<div class="screen-3__features">
<div class="screen-3__features__item">
<div class="screen-3__features__item__number">5.7</div>
<div class="screen-3__features__item__desc">英寸大屏</div>
</div>
<div class="screen-3__features__item">
<div class="screen-3__features__item__number">1200</div>
<div class="screen-3__features__item__desc">万像素</div>
</div>
<div class="screen-3__features__item">
<div class="screen-3__features__item__number">3D</div>
<div class="screen-3__features__item__desc">Touch</div>
</div>
<div class="screen-3__features__item">
<div class="screen-3__features__item__number">A9</div>
<div class="screen-3__features__item__desc">处理器</div>
</div>
</div><!-- screen-3__features -->
</div><!-- screen-3__wrap -->
</div><!-- screen-3 -->

<!-- 第四屏 -->
<div class="screen-4">
<div class="screen-4__warp">
<h2 class="screen-4__heading">丰富的手机型号</h2>
<h3 class="screen-4__subheading">找到适合你的手机</h3>
<div class="screen-4__phone">
<div class="screen-4__phone__item screen-4__phone__item_1">
<div class="screen-4__phone__item__color">慕课红</div>
<div class="screen-4__phone__item__storage">32G/64G/128G</div>
</div>
<div class="screen-4__phone__item screen-4__phone__item_2">
<div class="screen-4__phone__item__color">慕课红</div>
<div class="screen-4__phone__item__storage">32G/64G/128G</div>
</div>
<div class="screen-4__phone__item screen-4__phone__item_3">
<div class="screen-4__phone__item__color">慕课红</div>
<div class="screen-4__phone__item__storage">32G/64G/128G</div>
</div>
<div class="screen-4__phone__item screen-4__phone__item_4">
<div class="screen-4__phone__item__color">慕课红</div>
<div class="screen-4__phone__item__storage">32G/64G/128G</div>
</div>
</div><!-- screen-4__phone -->
</div><!-- screen-4__warp -->
</div><!-- screen-4 -->

<!-- 第五屏 -->
<div class="screen-5">
<h2 class="screen-5__heading">游戏、学习、拍照、有这一部就够了</h2>
   <h3 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h3>
   <div class="screen-5__bg"></div>
</div>
<!-- 立即购买 -->
<div class="screen-buy">
   <a class="screen-buy__button" href="javascript:;">立即购买</a>
</div>

<!-- footer -->
<footer class="footer">
© 2016 imooc.com  京ICP备13046642号
</footer>
<!-- 右侧导航栏 -->
<div class="outline">
   <a href="javascript:;" class="outline__item">首页</a>
   <a href="javascript:;" class="outline__item">外观</a>
   <a href="javascript:;" class="outline__item">配置</a>
   <a href="javascript:;" class="outline__item">型号</a>
   <a href="javascript:;" class="outline__item">说明</a>
</div>
<script src="js/test.js"></script>
<script src="js/index.js"></script>
</body>
</html>
/*header*/
.header {
	background-color: #f7f7f7;
}
.header__wrap {
	width: 1200px;
	height: 80px;
	margin: 0 auto;
	position: relative;
}
.header__logo {
	width: 150px;
	height: 40px;
	text-indent: 50px;/*文本缩进*/
	font-size: 20px;
	line-height: 40px;
	background: url(../img/logo.png) no-repeat left center;
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -20px;
	color: #07111b;
}
.header__nav {
	position: absolute;
	height: 40px;
	right: 20px;
	top: 50%;
	margin-top: -20px;
}
.header__nav-item {
	color: #07111b;
	font-size: 14px;
	line-height: 40px;
	padding-left: 40px;
	display: inline-block;
}
.header__nav-item:hover {
	color: #f01414;
}
.header__nav-item_active {
	color: #f01414;
}
.header__nav-item_button {
	width: 90px;
	height: 40px;
	background: #07111b;
	border-radius: 2px;
	color: #fff;
	margin-left: 40px;
}

/*第一屏*/
.screen-1 {
	height: 800px;
	background-color: #e7e7e7;
	background: url(../img/bg-screen-1.png);
	background-size: cover;
	overflow: hidden;
	position: relative;
}
.screen-1__heading {
	font-size: 48px;
	text-align: center;
	font-weight: normal;
	color: #4d555d;
	padding-top: 155px;
}
.screen-1__heading b {
	font-weight: normal;
	color: #f01414;
}
.screen-1__phone {
	width: 1375px;
	height: 305px;
	background: url(../img/screen-1-phone.png) no-repeat center;
	position: absolute;
	left: 50%;
	margin-left: -687px;
	bottom: 180px;
	z-index: 2;
}
.screen-1__shadow {
	width: 1233px;
	height: 411px;
	background: url(../img/screen-1-shadow.png);
	position: absolute;
	left: 50%;
	margin-left: -616px;
	bottom: 30px;
	z-index: 1;
	opacity: .8;
}

/*第二屏*/
.screen-2 {
	height: 800px;
	background-color: #fafafa;
	position: relative;
	overflow: hidden;
}
.screen-2__heading {
	text-align: center;
	color: #f01414;
	font-size: 48px;
	font-weight: normal;
	padding-top: 96px;
}
.screen-2__subheading {
	text-align: center;
	color: #07111b;
	font-size: 16px;
	font-weight: normal;
	line-height: 28px;
	padding-top: 24px;
}
.screen-2__phone {
	width: 928px;
	height: 873px;
	background: url(../img/screen-2-phone.png) no-repeat center;
	position: absolute;
	left: 50%;
	margin-left: -464px;
	bottom: -342px;
}
.screen-2__point {
	width: 96px;
	padding-right:111px; 
	height: 24px;
	background: url(../img/icon-point-right.png) no-repeat right center;
	font-size: 24px;
	line-height: 24px;
	font-weight: normal;
	color: #4d555d;
	position: absolute;
}
.screen-2__point_right {
	padding:0 0 0 111px;
	background: url(../img/icon-point-left.png) no-repeat left center;
}
.screen-2__point_1 {
	top: 156px;
	left: -150px;
}
.screen-2__point_2 {
	top: 37px;
	right: 140px;
}
.screen-2__point_3 {
	top: 341px;
	right: 38px;
}

/* 第三屏 */
.screen-3 {
	height: 800px;
	background-color: red;
	background: url(../img/bg-screen-3.png) no-repeat center;
	background-size: cover;
	overflow: hidden;
}
.screen-3__wrap {
	width: 1200px;
	height: 800px;
	margin: 0 auto;
	position: relative;
}
.screen-3__heading {
	color: #fff;
	font-weight: normal;
	font-size: 48px;
	padding-top: 96px;
}
.screen-3__subheading {
	color: #fff;
	font-weight: normal;
	font-size: 16px;
	line-height: 28px;
	padding-top: 24px;
}
.screen-3__phone {
	width: 750px;
	height: 900px;
	position: absolute;
	right: 0;
	top: 200px;
	z-index: 2;
	background: url(../img/screen-3-phone.png) no-repeat center;	
}
.screen-3__features {
	position: absolute;
	top: 397px;
	left: 0;
	width: 328px;
	height: 288px;
}
.screen-3__features__item {
	width: 138px;
	height: 118px;
	border: 1px solid rgba(255,255,255,.4);
	float: left;
	margin: 0 24px 24px 0;
	color: #fff;
	text-align: center;
	font-weight: normal;
}
.screen-3__features__item__number {
	font-size: 36px;
	height: 36px;
	line-height: 36px;
	padding:32px 0 8px;
}
.screen-3__features__item__desc {
	font-size: 14px;
	height: 14px;
	line-height: 14px;
}

/*第四屏*/
.screen-4 {
	height: 800px;
	background-color: #fff;
	overflow: hidden;
	position: relative;
}
.screen-4__warp {
	width: 1200px;
	height: 800px;
	margin: 0 auto;
	text-align: center;
}
.screen-4__heading {
	color: #f01414;
	font-size: 48px;
	font-weight: normal;
	padding-top: 137px;
}
.screen-4__subheading {
	color: #07111b;
	font-weight: normal;
	font-size: 16px;
	padding-top: 35px;
}
.screen-4__phone {
	width: 1240px;
	height: 270px;
	position: absolute;
	top: 305px;
}
.screen-4__phone__item {
	width: 270px;
	height: 270px;
	margin: 0 20px;
	float: left;
	position: relative;
}
.screen-4__phone__item_1 {
	background: url(../img/phone-1.png) no-repeat center;
}
.screen-4__phone__item_2 {
	background: url(../img/phone-2.png) no-repeat center;
}
.screen-4__phone__item_3 {
	background: url(../img/phone-3.png) no-repeat center;
}
.screen-4__phone__item_4 {
	background: url(../img/phone-4.png) no-repeat center;
}
.screen-4__phone__item__color {
	width: 100%;
	height: 16px;
	line-height: 16px;
	font-size: 16px;
	color: #2c3238;
	position: absolute;	
	bottom: -46px;
}
.screen-4__phone__item__storage {
	width: 100%;
	height: 12px;
	line-height: 12px;
	font-size: 12px;
	color: #a4a9ae;
	position: absolute;	
	bottom: -68px;
}

/*第五屏*/
.screen-5{
	height: 800px;
	position: relative;
	overflow: hidden;
	background-color: #d9dde1;
}
.screen-5__bg{
	width: 1920px;
	height: 433px;
	background:url(../img/bg-screen-5.png)  no-repeat center;	
	background-size: contain;
	position: absolute;
	left: 50%;
	margin-left: -960px;
	bottom: -100px;
}
.screen-5__heading{
	font-size:48px;
	line-height: 48px;
	color: #f01414;
	text-align: center;
	padding-top: 130px;
	font-weight: normal;
}
.screen-5__subheading{
	font-size:16px;
	color: #07111b;
	text-align: center;
	padding-top: 25px;
	line-height: 28px;
	font-weight: normal;
}
/*立即购买*/
.screen-buy{
	height: 80px;
	padding: 120px 0;

	position: relative;
	overflow: hidden;
	background: #2b333b url('../img/bg-screen-buy.png') center no-repeat;
	text-align: center;
}
.screen-buy__button{
	height: 80px;
	width: 240px;
	text-align: center;
	line-height: 80px;
	font-size: 24px;
	color: #fff;
	background-color: #f01414;
	display: inline-block;
	border-radius: 3px;
	transition: all .5s;
}
.screen-buy__button:hover{
	box-shadow: 0px 0px 10px rgba(0,0,0,.5);
}


.footer{
	height: 80px;
	line-height: 80px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	background-color: #07111b;
}
/*大纲样式*/
.outline {
    position: fixed;
    padding: 5px 10px;
    bottom: 120px;
    right: 0;
    z-index: 1;
    background-color: #fff;
    box-shadow: 0px 4px 12px 0px rgba(7, 17, 27, 0.1);
    z-index: 3;
}

.outline__item {
    display: block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding: 5px 0;
    background: rgb(255,255,255);
    margin: 5px 0px 0px;
    border-top: 1px solid #eee;
    text-align: center;
    color: #93999f;
}
.outline__item:first-child{
    border:none;
}
.outline__item:hover,
.outline__item_status_active{
    color: #f00;
}

.header__nav-tip{
	position: absolute;
	width: 30px;
	margin-left: 40px;
	height: 2px;
	background: #f00;
	left: 0;
	bottom: 0px;
	transition:  all .5s;
}
/*第一屏*/
.screen-1__heading,
.screen-1__phone,
.screen-1__shadow {
	transition: all 1s;
}
.screen-1__shadow_animate_init,
.screen-1__heading_animate_init {
	opacity: 0;
	transform: translate(0,100%);
}
.screen-1__phone_animate_done,
.screen-1__shadow_animate_done,
.screen-1__heading_animate_done {
	opacity: 1;
	transform: translate(0,0);
}
.screen-1__phone_animate_init {
	opacity: 0;
	transform: translate(0,-100%);
}

/*第二屏*/
.screen-2__heading,
.screen-2__subheading,
.screen-2__phone {
	transition: all 1s;
}
.screen-2__heading_animate_init {
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-2__phone_animate_init,
.screen-2__subheading_animate_init {
	opacity: 0;
	transform: translate(0,100%);
}
.screen-2__heading_animate_done,
.screen-2__phone_animate_done,
.screen-2__subheading_animate_done,
.screen-2__point_1_animate_done,
.screen-2__point_2_animate_done,
.screen-2__point_3_animate_done ,{
	opacity: 1;
	transform: translate(0,0);
}
.screen-2__point {
	transition: all 1s .5s;
}
.screen-2__point_1_animate_init {
	opacity: 0;
	transform: translate(-100%,0);
}
.screen-2__point_2_animate_init,
.screen-2__point_3_animate_init {
	opacity: 0;
	transform: translate(100%,0);
}
/*定义帧动画*/
.screen-2__point:after,
.screen-2__point:before {
	content: "";
	display: block;
	position: absolute;
	width: 21px;
	height: 21px;
	background-color: rgba(255,0,0,0.4);
	left: 0;
	top: 1px;
	border-radius: 50%;
	-webkit-animation: bounce 2s infinite;
}
.screen-2__point:before {
	-webkit-animation: bounce 2s infinite 1s;
}
.screen-2__point_1:after,
.screen-2__point_1:before {
	left: 186px;
	top: 1px;
}
@-webkit-keyframes bounce {
	0%,100% {
		transform: scale(0);
	}
	50% {
		transform: scale(1);
	}
}

/*第三屏*/
.screen-3__features,
.screen-3__heading,
.screen-3__subheading,
.screen-3__phone {
	transition: all 1s;
}
.screen-3__heading_animate_init {
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-3__phone_animate_init,
.screen-3__subheading_animate_init {
	opacity: 0;
	transform: translate(0,100%);
}
.screen-3__heading_animate_done,
.screen-3__phone_animate_done,
.screen-3__subheading_animate_done {
	opacity: 1;
	transform: translate(0,0);
}
.screen-3__features_animate_init {
	opacity: 0;
	transform: scale(.5);
}
.screen-3__features_animate_done {
	opacity: 1;
	transform: scale(1);
}
.screen-3__features__item {
	transition: all .5s;
}
.screen-3__features__item:hover {
	transform: scale(1.1);
	border-color: #fff;
	cursor: pointer;
}

/*第四屏*/
.screen-4__heading,
.screen-4__subheading {
	transition: all 1s;
}
.screen-4__heading_animate_init {
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-4__subheading_animate_init {
	opacity: 0;
	transform: translate(0,100%);
}
.screen-4__subheading_animate_done,
.screen-4__heading_animate_done {
	opacity: 1;
	transform: translate(0,0);
}
.screen-4__phone__item_1 {
	transition: all 1s .5s;
}
.screen-4__phone__item_2 {
	transition: all 1s 1s;
}
.screen-4__phone__item_3 {
	transition: all 1s 1.5s;
}
.screen-4__phone__item_4 {
	transition: all 1s 2s;
}
.screen-4__phone__item_1_animate_init,
.screen-4__phone__item_2_animate_init,
.screen-4__phone__item_3_animate_init,
.screen-4__phone__item_4_animate_init {
	opacity: 0;
}
.screen-4__phone__item_1_animate_done,
.screen-4__phone__item_2_animate_done,
.screen-4__phone__item_3_animate_done,
.screen-4__phone__item_4_animate_done {
	opacity: 1;
}

/*第五屏*/
.screen-5__heading,
.screen-5__subheading,
.screen-5__bg {
	transition: all 1s;
}
.screen-5__heading_animate_init {
	opacity: 0;
	transform: translate(0,-100%);
}
.screen-5__bg_animate_init,
.screen-5__subheading_animate_init {
	opacity: 0;
	transform: translate(0,100%);
}
.screen-5__heading_animate_done,
.screen-5__bg_animate_done,
.screen-5__subheading_animate_done {
	opacity: 1;
	transform: translate(0,0);
}
/*公共样式*/
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: "Microsoft YaHei";
	font-weight: normal;
}
a {
	text-decoration: none;
}
//测试动画
//定义有动画的元素
var screenAnimateElements = {
    ".screen-1":[
    ".screen-1__heading",
    ".screen-1__phone",
    ".screen-1__shadow",
    ],
    ".screen-2":[
    ".screen-2__heading",
    ".screen-2__phone",
    ".screen-2__subheading",
    ".screen-2__point_1",
    ".screen-2__point_2",
    ".screen-2__point_3",
    ],
    ".screen-3":[
    ".screen-3__heading",
    ".screen-3__phone",
    ".screen-3__subheading",
    ".screen-3__features",
    ],
    ".screen-4":[
    ".screen-4__heading",
    ".screen-4__subheading",
    ".screen-4__phone__item_1",
    ".screen-4__phone__item_2",
    ".screen-4__phone__item_3",
    ".screen-4__phone__item_4",
    ],
    ".screen-5":[
    ".screen-5__heading",
    ".screen-5__bg",
    ".screen-5__subheading",
    ]
};
//设置屏幕动画,这里的screenCls指代的就是每一屏
function setScreenAnimate(screenCls){
	var screen = document.querySelector(screenCls);//获取当前屏的元素
	var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素，即.screen-1这个数组
	var isSetAnimateClass = false;/*通过为isSetanimateClass这个变量保存布尔值的方式 判断元素是否有被初始化。
									这是一种标记的方法，表示函数有无执行；需要在函数执行结束的时候赋值，并return；
									默认为false 如果是fasle 执行程序 并被赋值true*/
	var isAnimateDone = false;
	//当点击这个屏幕时
	screen.onclick = function(){
		//初始化样式，增加init样式
		if(isSetAnimateClass === false){
			//循环animateElements中的每个元素
			for(var i=0;i<animateElements.length;i++){
				//获取animateElements即。screen-1中的每个元素,就是通过类名的方式获取元素
				var element = document.querySelector(animateElements[i]);
				console.log(element);
				//获取到每个需要有动画的元素的class中的值
				var basecls = element.getAttribute("class");
				//设置每个需要有动画的元素中的class值，就是跟这个元素增加新的class，即动画效果
				/*第一个元素class为要设置的元素的名字。第二个元素为元素的值
				。即element原本的元素值加上element去掉点的那部分再加上新的元素名的后缀*/
				element.setAttribute("class",basecls+" "+animateElements[i].substr(1)+"_animate_init");
			}
			isSetAnimateClass = true;
			return;
		}
		if(isAnimateDone === false){
			//循环animateElements中的每个元素
			for(var i=0;i<animateElements.length;i++){
				//获取animateElements即。screen-1中的每个元素
				var element = document.querySelector(animateElements[i]);
				//获取到每个需要有动画的元素的class中的值
				var basecls = element.getAttribute("class");
				//设置每个需要有动画的元素中的class值，就是跟这个元素增加新的class，即动画效果
				/*第一个元素class为要设置的元素的名字。第二个元素为元素的值
				。即element原本的元素值加上element去掉点的那部分再加上新的元素名的后缀*/
				element.setAttribute("class",basecls.replace("_animate_init","_animate_done"));
			}
			isAnimateDone = true;
			return;
		}
		if(isAnimateDone === true){
			//循环animateElements中的每个元素
			for(var i=0;i<animateElements.length;i++){
				//获取animateElements即。screen-1中的每个元素
				var element = document.querySelector(animateElements[i]);
				//获取到每个需要有动画的元素的class中的值
				var basecls = element.getAttribute("class");
				//设置每个需要有动画的元素中的class值，就是跟这个元素增加新的class，即动画效果
				/*第一个元素class为要设置的元素的名字。第二个元素为元素的值
				。即element原本的元素值加上element去掉点的那部分再加上新的元素名的后缀*/
				element.setAttribute("class",basecls.replace("_animate_done","_animate_init"));
			}
			isAnimateDone = false;
			return;
		}
	}
}
// 遍历screenAnimateElements对象中的每个元素
	for(var k in screenAnimateElements){
		setScreenAnimate(k);
	}
//获取元素
var getElem = function(selector){
	return document.querySelector(selector);
}
var getAllElem = function(selector){
	return document.querySelectorAll(selector);
}
//获取元素样式
var getCls = function(element){
	return element.getAttribute("class");
}
//设置元素样式
var setCls = function(element,cls){
	return element.setAttribute("class",cls);
}
//为元素添加样式
var addCls = function(element,cls){
	var baseCls = getCls(element);//element.getAttribute("class")
	//如果获取的类中没有cls这个值
	if(baseCls.indexOf(cls) === -1){
		setCls(element,baseCls+" "+cls);//element.setAttribute("class",baseCls+" "+cls);
	}
}
//为元素删除样式
var delCls = function(element,cls){
	var baseCls = getCls(element);//element.getAttribute("class")
	if(baseCls.indexOf(cls) !== -1){
		setCls(element,baseCls.split(cls).join(" ").replace(/\s+/g," "));
		/*举个例子：已知class="header__nav active";需要删除样式中的active(即class="header__nav")。
		此时baseCls为"header__nav active"，cls为"active"，当执行split(cls)后，
		即将字符串baseCls转为数组，从该参数cls指定的地方分割，有["header__nav "," "]，
		然后通过join()方法将数组转为字符串，以传入的参数' '（空格）进行分割即有："header_nav    ";
		此时，由于产生了多个空格，采用正则表达式进行消除。*/
	}
}


//初始化样式  init
//所有有动画的样式
var screenAnimateElements = {
    ".screen-1":[
    ".screen-1__heading",
    ".screen-1__phone",
    ".screen-1__shadow",
    ],
    ".screen-2":[
    ".screen-2__heading",
    ".screen-2__phone",
    ".screen-2__subheading",
    ".screen-2__point_1",
    ".screen-2__point_2",
    ".screen-2__point_3",
    ],
    ".screen-3":[
    ".screen-3__heading",
    ".screen-3__phone",
    ".screen-3__subheading",
    ".screen-3__features",
    ],
    ".screen-4":[
    ".screen-4__heading",
    ".screen-4__subheading",
    ".screen-4__phone__item_1",
    ".screen-4__phone__item_2",
    ".screen-4__phone__item_3",
    ".screen-4__phone__item_4",
    ],
    ".screen-5":[
    ".screen-5__heading",
    ".screen-5__bg",
    ".screen-5__subheading",
    ]
};
//定义一个将样式都变为init的函数
var setScreenAnimateInit = function(screenCls){
	var screen = document.querySelector(screenCls);//获取当前屏的元素
	var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素，即.screen-1这个数组
	for(var i=0;i<animateElements.length;i++){
				//获取animateElements即。screen-1中的每个元素,就是通过类名的方式获取元素
				var element = document.querySelector(animateElements[i]);
				//获取到每个需要有动画的元素的class中的值
				var basecls = element.getAttribute("class");
				//设置每个需要有动画的元素中的class值，就是跟这个元素增加新的class，即动画效果
				/*第一个元素class为要设置的元素的名字。第二个元素为元素的值
				。即element原本的元素值加上element去掉点的那部分再加上新的元素名的后缀*/
				element.setAttribute("class",basecls+" "+animateElements[i].substr(1)+"_animate_init");
			}	
}
//将init样式变为done样式
var playScreenAnimateDone = function(screenCls){
	var screen = document.querySelector(screenCls);//获取当前屏的元素
	var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素，即.screen-1这个数组
	for(var i=0;i<animateElements.length;i++){
				//获取animateElements即。screen-1中的每个元素
				var element = document.querySelector(animateElements[i]);
				//获取到每个需要有动画的元素的class中的值
				var basecls = element.getAttribute("class");
				//设置每个需要有动画的元素中的class值，就是跟这个元素增加新的class，即动画效果
				/*第一个元素class为要设置的元素的名字。第二个元素为元素的值
				。即element原本的元素值加上element去掉点的那部分再加上新的元素名的后缀*/
				element.setAttribute("class",basecls.replace("_animate_init","_animate_done"));
			}
}
//当页面加载进来时，调用setScreenAnimateInit（）函数，就是将样式都变为init的样式
window.onload = function(){
	// 遍历screenAnimateElements对象中的每个元素
	for(var k in screenAnimateElements){
		setScreenAnimateInit(k);
	}
}

//第二部，滚动到哪播放到哪
//滚动条
window.onscroll = function(){
	//定义滚动条的高度
	var top = document.documentElement.scrollTop;
	console.log(top);
	//当top高度为多少时，就将init转换为done
	//所以要添加将init转换为done 的函数
	if(top>1){
		playScreenAnimateDone(".screen-1");
	}
	if(top>800){
		playScreenAnimateDone(".screen-2");
	}
	if(top>800*2){
		playScreenAnimateDone(".screen-3");
	}
	if(top>800*3){
		playScreenAnimateDone(".screen-4");
	}
	if(top>800*4){
		playScreenAnimateDone(".screen-5");
	}
}
慕标0373250 2018-06-14
源自：H5+CSS3+JS实现炫酷网页   5-3 JS实现交互动画(导航条)
5
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
提问者 慕标0373250 2018-06-14 11:16:43

var top = document.body.scrollTop || document.documentElement.scrollTop;  

这样写就好了，不用回答了，谢谢

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

console.log(top) 为什么总是0？？获取不到高度
10 0 3
这里为什么是padding-top，不是margin-top？
0 0 7
我的页头部分为什么会消失?
11 0 4
为什么top为0
14 0 3
0 & 0 = 0,那么取反不应该是 1 吗？可为什么 0 ^ 0也等于0？？？
26 0 6

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师