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

问题一：document.body.scrollTop我自己写的时候无法获取值，但是老师的代码在我的电脑上可以运行，看了下问答区的同学，有的放出JS代码老师测试了是正确的，可是同学的不正确，然后我测试了下，在html文件这边，如果直接写html标签（老师用的），document.body.scrollTop就可以，如果是H5的标准写法，先写<!DOCTYPE html>，再写html，document.body.scrollTop就无法使用，这时可以用document.documentElement.scrollTop。

所以，直接写html标签和写<!DOCTYPE html>，再写html标签有什么区别，哪一个好。

最后的解决办法是用了var top = document.body.scrollTop|| document.documentElement.scrollTop;

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

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

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

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

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

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

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

<!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文件

<!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>

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

}

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-24

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

收起

1回答

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

同学你好，问题解答如下：

1、自己测试的时候使用html标签和写<!DOCTYPE html>两种都是可以的，但是一般情况下网站中使用<!DOCTYPE html>较多。

2、代码中index.css文件粘贴的不对，建议重新上传一下，便于帮助测试解决。

祝学习愉快！

收起回答

相似问题

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

document.body.scrollTop

顶部导航条和旁边的导航条都不能定位

老师有关楼层导航条效果实现的问题

导航和导航条有什么区别？

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

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

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

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

正在回答

请选择置顶位置