关于document.body.scrollTop和文件声明的区别、导航条无法跳转

上一个问题不小心点了采纳了，链接放这里http://class.imooc.com/course/qadetail/207238

用根据兼容性选择top值后，在做导航条双向绑定时候，无法跳转。

我根据不同的html声明样式做了两次断点调试

document.documentElement.scrollTop=i*800+1;//兼容写法，h5标准声明时可以取到值

document.body.scrollTop=i*800+1; //老师的写法，html中直接写html标签可以取到值

执行完这句之后，两种写法的返回值就都变成了0，变化就一瞬间。然后跳转window.onscroll，为什么变化就一瞬间，

到底怎么改啊，改了一天了，这个地方卡了几个小时了，求救。

下面我贴出源码，十分老师。

index.html文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</nav>

</div>

</header>

<h2 class="screen-1_heading"><b>慕课网手机</b> 让你的生活更精彩</h2>

</div>

<div class="screen-2_heading">优美的设计，更令人着迷</div>

<h3 class="screen-2_subheading">采用受欢迎的设计，让他更加出色。<br />

款式小巧，轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致</h3>

</div>

<h2 class="screen-3_heading">外形小巧，功能强大的手机</h2>

<h3 class="screen-3_subheading">款式小巧、轻便手感更舒适。<br />

绚丽高清的显示屏，整个外观显得格外精致。</h3>

</div>

</div>

<div class="screen-3_features_item_desc">Touch</div>

</div>

</div>

<h2 class="screen-4_heading">丰富的手机型号</h2>

<h3 class="screen-4_subheading">找到适合你的手机</h3>

</div>

</div>

</div>

</div>

</div>

</div>

<h2 class="screen-5_heading">游戏、学习、拍照、有这一部就够了</h2>

<h3 class="screen-5_subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h3>

</div>

</div>

</footer>

</div>

</body>

</html>

base.css文件。

margin: 0;

padding: 0;

}

body{

/* background-color: green; */

font-size: 12px;

font-family: 'Microsoft Yahei',微软雅黑;

}

text-decoration: none;

}

h2,h3{

font-weight: normal;

}

index.css文件

/* BEM设计模式

模块:没有前缀,多个单子用-连接

元素:元素在模块之后,可以有多个层级,以_连接

修饰:某元素或者某个模块特别的状态，必须有一个状态名和状态值，使用_连接

.header{

background-color: #f7f7f7;

}

.header_wrap{

position: relative;

width: 1200px;

height: 80px;

margin: 0 auto;

}

.header_logo{

width: 150px;

height: 38px;

line-height: 38px;

font-size: 20px;

color: #07111b;

text-indent: 50px;

background: url(../img/logo.png) no-repeat left center;

background-size: 38px 38px;

position: absolute;

top: 50%;

margin-top: -19px;

left: 20px;

}

.header_nav{

position: absolute;

height: 38px;

line-height: 38px;

top: 50%;

margin-top: -19px;

right: 20px;

}

.header_nav-item{

color: #292f35;

font-size: 14px;

display: inline-block;

height:38px;

line-height: 38px;

margin-left: 35px;

position: relative;

width:30px;

}

.header_nav-item:hover{

color: #f01400;

}

.header_nav-item_status_active{

color: #f01400;

position: relative;

}

.header_nav-item_status_active:after{

content: ' ';

display: block;

width: 100%;

height: 2px;

position: absolute;

background-color: #f01400;

left: 0;

bottom: 0;

}

.header_nav-item_custom_button{

background-color: #000;

color: #f4f4f5;

text-align: center;

width: 90px;

border-radius: 3px;

}

/* 第一屏 */

.screen-1{

height: 800px;

background:url(../img/bg-screen-1.png) no-repeat center;

position: relative;

background-size: 100% 100%;

/* 可以简写成cover（铺满，长边将被剪切） */

}

.screen-1_heading{

font-weight: normal;

font-size: 46px;

color: #4d555d;

text-align: center;

padding: 152px;

}

.screen-1_heading b{

color:#f01400;

font-weight: normal;

}

.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) no-repeat center;

position: absolute;

left: 50%;

margin-left: -616px;

bottom: 0px;

z-index: 1;

opacity: 0.6;

}

/* 第二屏 */

.screen-2{

height: 800px;

background: #fafafa;

position: relative;

overflow: hidden;

}

.screen-2_heading{

font-size: 46px;

line-height: 46px;

color: #f01400;

text-align: center;

padding-top: 96px;

}

.screen-2_subheading{

font-weight: normal;

font-size: 14px;

line-height: 28px;

color: #2c3137;

text-align: center;

padding-top: 25px;

}

.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: -345px;

}

.screen-2_point{

width: 108px;

padding-right: 112px;

height: 22px;

font-size: 22px;

line-height: 22px;

color: #4d555d;

position: absolute;

background:url(../img/icon-point-right.png) no-repeat center right;

}

.screen-2_point_custom_right{

padding-left: 112px;

background:url(../img/icon-point-left.png) no-repeat center left;

}

.screen-2_point_i_1{

top: 158px;

left:-164px;

}

.screen-2_point_i_2{

right:-5px;

top:62px;

}

.screen-2_point_i_3{

right:-90px;

top:330px;

}

/* 第三屏 */

.screen-3{

background: red;

height: 800px;

position: relative;

background: url(../img/bg-screen-3.png) no-repeat center;

background-size: cover;

overflow: hidden;

}

.screen-3_wrap{

width: 1200px;

height: auto;

margin: 0 auto;

position: relative;

}

.screen-3_heading{

font-size: 46px;

line-height: 46px;

color: white;

text-align: left;

padding-top: 94px;

}

.screen-3_subheading{

font-size: 14px;

line-height: 28px;

color: white;

text-align: left;

padding-top: 25px;

}

.screen-3_phone{

width: 750px;

height: 873px;

background: url(../img/screen-3-phone.png) no-repeat top;

position: absolute;

right: 0;

top: 95px;

z-index: 2;

}

.screen-3_features{

position: absolute;

top: 395px;

left: 0;

width: 320px;

height: 280px;

}

.screen-3_features_item{

width: 138px;

height: 118px;

border: 1px solid #cb7173;

margin:0 20px 20px 0;

float: left;

border-radius: 3px;

color: #fff;

text-align: center;

}

.screen-3_features_item_number{

height: 36px;

font-size: 36px;

line-height: 36px;

padding: 28px 0 8px;

}

.screen-3_features_item_desc{

height: 14px;

font-size: 14px;

line-height: 14px;

}

/* 第四屏 */

.screen-4{

background: #fff;

height: 800px;

position: relative;

overflow: hidden;

}

.screen-4_wrap{

width: 1200px;

height: auto;

margin: 0 auto;

position: relative;

}

.screen-4_heading{

font-size: 46px;

line-height: 46px;

color: #F01400;

text-align: center;

padding-top: 135px;

}

.screen-4_subheading{

font-size: 14px;

line-height: 28px;

color: #464a4f;

text-align: center;

padding-top: 29px;

}

.screen-4_phone{

width: 750px;

height: 873px;

background: url(../img/screen-3-phone.png) no-repeat top;

position: absolute;

right: 0;

top: 95px;

z-index: 2;

}

.screen-4_type{

width: 1260px;

height: 270px;

position: absolute;

top: 304px;

margin-left: 45px;

}

.screen-4_type_item{

width: 220px;

margin-right: 90px;

height: 270px;

float: left;

position: relative;

text-align: center;

}

.screen-4_type_item_1{

background: url(../img/phone-1.png) no-repeat left top;

}

.screen-4_type_item_2{

background: url(../img/phone-2.png) no-repeat left top;

}

.screen-4_type_item_3{

background: url(../img/phone-3.png) no-repeat left top;

}

.screen-4_type_item_4{

background: url(../img/phone-4.png) no-repeat left top;

}

.screen-4_type_item_color{

width: 100%;

height: 14px;

line-height: 14px;

font-size: 14px;

color: #2c3238;

position: absolute;

bottom: -44px;

}

.screen-4_type_item_storage{

width: 100%;

height: 12px;

line-height: 12px;

font-size: 12x;

color: #a4a9ae;

position: absolute;

bottom: -66px;

}

/*第五屏*/

.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:46px;

line-height: 46px;

color: #f01400;

text-align: center;

padding-top: 130px;

}

.screen-5_subheading{

font-size:14px;

color: #2c3137;

text-align: center;

padding-top: 25px;

line-height: 28px;

}

/*立即购买*/

.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;

background-color: #fff;

right: 0;

bottom: 120px;

z-index: 3;

box-shadow: 0 4px 12px rgba(0,0,0,0.5);

}

.outline_item{

display: block;

width: 40px;

height: 30px;

line-height: 30px;

text-align: center;

color: #93999f;

background-color: #fff;

padding: 5px 0;

margin-top: 5px;

border-top: 1px solid #eee;

}

.outline_item:first-child{

border: none;

}

.outline_item_status_active{

color: red;

}

ainimate.css文件

/* 第一屏动画 */

.screen-1_heading,

.screen-1_phone,

.screen-1_shadow{

transition: all 1s;

}

.screen-1_heading_animate_init,

.screen-1_shadow_animate_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-1_phone_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-1_heading_animate_done,

.screen-1_phone_animate_done{

opacity: 1;

transform: translate(0,0);

}

.screen-1_shadow_animate_done{

opacity: 0.8;

transform: translate(0,0);

}

/* 第二屏动画 */

.screen-2_heading,

.screen-2_phone,

.screen-2_subheading{

transition: all 1s;

}

.screen-2_heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-2_subheading_animate_init,

.screen-2_phone_animate_init{

opacity: 0;

transform: translate(0,50%);

}

.screen-2_heading_animate_done,

.screen-2_phone_animate_done{

opacity: 1;

transform: translate(0,0);

}

.screen-2_subheading_animate_done{

opacity: 0.8;

transform: translate(0,0);

}

.screen-2_point{

transition: all 1s 0.5s;

}

.screen-2_point_i_1_animate_init{

opacity: 0;

transform: translate(-50%,0);

}

.screen-2_point_i_2_animate_init,

.screen-2_point_i_3_animate_init{

opacity: 0;

transform: translate(50%,0);

}

.screen-2_point_animate_done{

opacity: 1;

transform: translate(0,0);

}

/* 导航条 _status_back样式 */

.header{

transition: all 2s;

}

.header_status_back{

background-color: rgba(0,0,0,.5);

position: fixed;

top: 0;

/* 这里同时设置right和left是为了使其自动居中 */

left: 0;

right: 0;

z-index: 3;

}

/* 这里提前预制了样式,并且使用了选择器提高了权重,

使得前面的选择器被JS设置出来之后,本条样式写的其他元素（子元素）的马上生效 */

.header_status_back .header_nav-item,

.header_status_back .header_logo{

color:#fff

}

/* 大纲_star_in样式 */

.outline{

transition: all 2s;

opacity: 0;

transform: translate(100%,0);

}

.outline_star_in{

opacity: 1;

transform: translate(0,0);

}

/* 第三屏动画 */

.screen-3_heading,

.screen-3_phone,

.screen-3_subheading,

.screen-3_features{

transition: all 1s;

}

.screen-3_heading_animate_done,

.screen-3_phone_animate_done,

.screen-3_subheading_animate_done{

opacity: 1;

transform: translate(0,0);

}

.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_features_animate_init{

opacity: 0;

transform: scale(.5);

}

.screen-3_features_animate_done{

opacity: 1;

transform: scale(1);

}

.screen-3_features_item{

transform: scale(1);

transition: all .5s;

}

.screen-3_features_item:hover{

transform: scale(1.1);

}

/* 第四屏动画 */

.screen-4_heading,

.screen-4_subheading{

transition: all 1s;

}

.screen-4_heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

/* margin-top: -1000px; */

}

.screen-4_subheading_animate_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-4_heading_animate_done,

.screen-4_subheading_animate_done{

opacity: 1

transform: translate(0,0);

}

.screen-4_type_item_1{

transition: all 1s .5s;

}

.screen-4_type_item_2{

transition: all 1s 1s;

}

.screen-4_type_item_3{

transition: all 1s 1.5s;

}

.screen-4_type_item_4{

transition: all 1s 2s;

}

.screen-4_type_item_1_animate_init,

.screen-4_type_item_2_animate_init,

.screen-4_type_item_3_animate_init,

.screen-4_type_item_4_animate_init{

opacity: 0;

}

.screen-4_type_item_1_animate_done,

.screen-4_type_item_2_animate_done,

.screen-4_type_item_3_animate_done,

.screen-4_type_item_4_animate_done{

opacity: 1;

}

/* 第五屏动画 */

.screen-5_heading,

.screen-5_bg,

.screen-5_subheading{

transition: all 1s;

}

.screen-5_heading_animate_init{

opacity: 0;

transform: translate(0,-100%);

}

.screen-5_subheading_animate_init,

.screen-5_bg_animate_init{

opacity: 0;

transform: translate(0,100%);

}

.screen-5_bg_animate_done,

.screen-5_heading_animate_done,

.screen-5_subheading_animate_done{

opacity: 1;

transform: translate(0,0);

}

/* 定义帧动画 */

@-webkit-keyframes bounce{

from{

transform: scale(0);

}

50%{

transform: scale(1);

}

/* to{} */

}

/* 使用帧动画 */

.screen-2_point::before,

.screen-2_point::after{

content: ' ';

display: block;

width: 20px;

height: 20px;

position: absolute;

/* 这里之所以设置top为1,因为容器高度为22px,当前元素设置为20px,为了居中 */

top: 1px;

left: 0px;

background-color: rgba(255,0,0,0.4);

opacity: .4;

-webkit-animation: bounce 2s infinite;

border-radius: 50%;

}

.screen-2_point::before{

-webkit-animation: bounce 2s infinite 1s;

}

.screen-2_point_i_1::before,

.screen-2_point_i_1::after{

/* 这里设置right为0时不生效，同时设置left和right时候left生效

用选择器权重去写只能提高权重，会覆盖相同的样式，不同样式会叠加*/

/* 这里设置200,因为父容器为220,当前元素为20 */

left:200px;

}

index.js文件

// 获取元素

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,cls);

if(baseCls.indexOf(cls)===-1)setCls(element,baseCls+' '+cls);

}

// 为元素删除样式

var delCls=function(element,cls){

var baseCls=getCls(element,cls);

if(baseCls.indexOf(cls)!==-1)

setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));

}

// 第一步:初始化样式 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_i_1',

'.screen-2_point_i_2',

'.screen-2_point_i_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_type_item_1',

'.screen-4_type_item_2',

'.screen-4_type_item_3',

'.screen-4_type_item_4'

'.screen-5':[

'.screen-5_heading',

'.screen-5_bg',

'.screen-5_subheading'

}

// 设置屏内动画为初始状态

var setScreenAnimateInit=function(screenCls){

var screen=document.querySelector(screenCls);

var animateElements=screenAnimateElements[screenCls];

for(var i=0;i<animateElements.length;i++){

var element=document.querySelector(animateElements[i]);

var baseCls=element.getAttribute('class');

element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init' )

}

window.onload=function(){

for(var k in screenAnimateElements){

setScreenAnimateInit(k);

}

setTimeout(playScreenAnimateDone('.screen-1'),5000);

}

// 第二步:页面滚动到哪里就播放哪里

// 设置播放屏内的元素动画

var playScreenAnimateDone=function(screenCls){

var screen=document.querySelector(screenCls);

var animateElements=screenAnimateElements[screenCls];

for(var i=0;i<animateElements.length;i++){

var element=document.querySelector(animateElements[i]);

var baseCls=element.getAttribute('class');

element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'))

}

window.onscroll=function(){

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

var top = document.body.scrollTop;

var top=parseFloat(top);

// console.log(top);

// var top=document.body.scrollTop;

// playScreenAnimateDone('.screen-1');如果if判断不合理，直接提前拿出去了

if(top>1) playScreenAnimateDone('.screen-1');

if(top>2){

addCls(getElem('.outline'),'outline_star_in');

addCls(getElem('.header'),'header_status_back');

// addCls(getElem('.header_logo'),'header_logo_status_back');

// for(var i=0;i<navItems.length;i++){

// addCls(navItems[i],'header_nav-item_status_back');

// }

// addCls(getAllElem('.header_nav-item'),'header_nav-item_status_back');

}else{

delCls(getElem('.outline'),'outline_star_in');

delCls(getElem('.header'),'header_status_back');

// delCls(getElem('.header_logo'),'header_logo_status_back');

// for(var i=0;i<navItems.length;i++){

// delCls(navItems[i],'header_nav-item_status_back');

// }

// delCls(getAllElem('.header_nav-item'),'header_nav-item_status_back');

}

if(top>(1*800-200)){

playScreenAnimateDone('.screen-2');

}

if(top>(2*800-200)){

playScreenAnimateDone('.screen-3');

}

if(top>(3*800-200)){

playScreenAnimateDone('.screen-4');

}

if(top>(4*800-200)){

playScreenAnimateDone('.screen-5');

}

//导航条、侧边栏双向绑定

var navItems=getAllElem('.header_nav-item');

var outLineItems=getAllElem('.outline_item');

var setNavJump=function(i,lib){

console.log("3");

var elem=lib[i];

elem.onclick=function(){

console.log("4");

// document.documentElement.scrollTop=i*800+1;

// document.body.scrollTop=i*800+1;

}

for(var i=0;i<navItems.length;i++){

console.log("1");

setNavJump(i,navItems);

}

for(var i=0;i<outLineItems.length;i++){

console.log("2");

setNavJump(i,outLineItems);

}

王文辉 2020-03-25

源自：宣传页项目 5-4 导航条的双向绑定

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2020-03-25 18:27:15

同学你好，代码修改之后地址栏访问的链接中如果有#，也就是之前访问过的，需要删除掉。也就是这样：

这里是通过点击事件绑定的，但是a元素也有自动跳转的效果，所以需要阻止a进行跳转。如果自己修改之后还是有问题的，建议把nav这部分修改过后的代码粘贴上来，老师再次测试下。

祝学习愉快！

收起回答

王文辉提问者 #1

首先十分感谢老师，我试了下，还是不行，为什么scrollTop变化就一瞬间，怎么想都不明白。<nav class="header_nav"> <a href="javascript:;" class="header_nav-item">首页</a> <a href="javascript:;" class="header_nav-item">外观</a> <a href="javascript:;" class="header_nav-item">配置</a> <a href="javascript:;" class="header_nav-item">型号</a> <a href="javascript:;" class="header_nav-item">说明</a> <a href="javascript:;" class="header_nav-item header_nav-item_custom_button">立即购买</a> </nav>

2020-03-25 18:31:45