点击不能跳转

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</div>

</header>

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

</div>

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

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

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

</div>

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

<h3 class="screen-3__subheading">采用受欢迎的设计，让它更加出色。<br>

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

</a>

</a>

<div class="screen-3__features_item_desc">touch</div>

</a>

</a>

</div>

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

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

</a>

</a>

</a>

</a>

</div>

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

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

</div>

</div>

</aside>

</body>

</html>

BEM 设计模式

模块（没有前缀，多个单词用-链接）

元素（元素在模块之后，可以有多个层级，用——链接）

修饰（某元素、或者某模块特别的状态，必须有一个状态名和状态值，只用一个—链接）

.header{

background-color: #f7f7f7;

}

.header__wrap{

width: 1200px;

height: 80px;

position: relative;

margin: 0 auto;

}

.header__logo{

width: 150px;

height: 38px;

font-size: 20px;

color: #07111b;

text-indent: 50px;

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

-webkit-background-size: 38px 38px;

background-size: 38px 38px;

line-height: 38px;

position: absolute;

top: 50%;

margin-top: -19px;

left: 20px;

}

.header__nav{

position: absolute;

right: 20px;

height: 38px;

top: 50%;

margin-top: -19px;

}

.header__nav-item{

color: #292f35;

font-size: 14px;

display: block;

height: 38px;

line-height: 38px;

text-align: center;

float: left;

margin-left: 40px;

position: relative;

}

.header__nav-item:hover{

color: #f01400;

}

.header__nav__item_status_active{

color: #f01400;

border-bottom: 1px solid #f01400;

}

.header__nav__item_status_active::after{

content: "";

display: block;

width: 100%;

height: 2px;

position: absolute;

left: 0;

bottom: 0;

background-color: #f01400;

}

.header__nav-item_custom_button{

background-color: #000;

color: #f4f4f5;

width: 90px;

height: 38px;

border-radius: 3px;

}

/*第一屏*/

.screen-1{

height: 800px;

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

-webkit-background-size: cover;

background-size: cover;

position: relative;

overflow: hidden;

}

.screen-1__heading{

font-weight: normal;

font-size: 46px;

color: #4d555d;

text-align: center;

padding-top: 152px;

}

.screen-1__heading b{

color: #f01400;

font-size: 46px;

font-weight: normal;

}

.screen-1__phone{

width: 1375px;

height: 305px;

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

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

position: absolute;

left: 50%;

margin-left: -616px;

bottom: 10px;

z-index: 1;

opacity: .8;

}

/*第二屏*/

.screen-2{

height: 800px;

position: relative;

overflow: hidden;

}

.screen-2__heading{

font-weight: normal;

font-size: 46px;

color: #f01400;

text-align: center;

padding-top: 96px;

line-height: 46px;

}

.screen-2__subheading{

font-size: 14px;

color: #2c3137;

text-align: center;

padding-top: 25px;

line-height: 28px;

}

.screen-2__phone{

width: 928px;

height: 873px;

background: url(../img/screen-2-phone.png) center no-repeat;

position: absolute;

left: 50%;

margin-left: -464px;

bottom: -345px;

z-index: 2;

}

.screen-2__point{

width: 108px;

padding-right: 112px;

height: 22px;

font-size: 22px;

line-height: 22px;

color: #4d555d;

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

position: absolute;

}

.screen-2__point_custom_right{

padding: 0 0 0 112px;

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

}

.screen-2__point_i_1{

top: 150px;

left: -130px;

}

.screen-2__point_i_2{

top: 30px;

right:130px;

}

.screen-2__point_i_3{

top: 330px;

right: 10px;

}

/*第三屏*/

.screen-3{

height: 800px;

position: relative;

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

-webkit-background-size: cover;

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: #fff;

text-align: left;

padding-top: 94px;

}

.screen-3__subheading{

font-size: 14px;

color: #fff;

text-align: left;

padding-top: 25px;

line-height: 28px;

}

.screen-3__phone{

width: 750px;

height: 875px;

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

position: absolute;

right: 0;

top: 195px;

bottom: 0px;

z-index: 2;

}

.screen-3__features{

position: absolute;

top: 395px;

left: 0;

width: 320px;

height: 280px;

}

.screen-3__features_item{

width: 128px;

height: 118px;

border: 1px solid #cd7173;

border-radius: 3px;

margin: 0 20px 20px 0;

float: left;

color: #fff;

text-align: center;

display: block;

}

.screen-3__features_item:hover{

box-shadow: 0 0 10px rgba(0,0,0,.5);

transition: all .5s;

}

.screen-3__features_item_number{

height: 36px;

line-height: 36px;

font-size: 36px;

padding: 28px 0 8px 0;

}

.screen-3__features_item_desc{

height: 14px;

line-height: 14px;

font-size: 14px;

}

/*第四屏*/

.screen-4{

height: 800px;

position: relative;

background: #fff;

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;

color: #464a4f;

text-align: center;

padding-top: 29px;

line-height: 28px;

}

.screen-4__type{

width: 1260px;

height: 270px;

position: absolute;

top: 304px;

margin-left: 30px;

}

.screen-4__type_item{

width: 220px;

height: 270px;

margin-right: 90px;

float: left;

position: relative;

text-align: center;

display: block;

}

.screen-4__type_item_i-1{

background: url(../img/phone-1.png);

}

.screen-4__type_item_i-2{

background: url(../img/phone-2.png);

}

.screen-4__type_item_i-3{

background: url(../img/phone-3.png);

}

.screen-4__type_item_i-4{

background: url(../img/phone-4.png);

}

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

color: #a4a9ae;

position: absolute;

bottom: -66px;

}

/*第五屏*/

.screen-5{

height: 800px;

background: #d9dde1;

position: relative;

overflow: hidden;

}

.screen-5__bg{

width: 1920px;

height: 433px;

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

-webkit-background-size: contain;

background-size: contain;

position: absolute;

left: 50%;

margin-left: -960px;

bottom: -100px;

}

.screen-5__heading{

font-weight: normal;

font-size: 46px;

color: #f01400;

text-align: center;

padding-top: 96px;

line-height: 46px;

}

.screen-5__subheading{

font-size: 14px;

color: #2c3137;

text-align: center;

padding-top: 25px;

line-height: 28px;

}

/*第六屏*/

.screen-6{

height: 320px;

position: relative;

background: #2b333b url(../img/bg-screen-buy.png) center no-repeat;

}

.screen-6__buttn{

width: 240px;

height: 80px;

text-align: center;

line-height: 80px;

font-size: 24px;

display: block;

color: #fff;

background: #f01414;

position: absolute;

top: 50%;

left: 50%;

margin-top: -40px;

margin-left: -120px;

border-radius: 4px;

}

.screen-6__buttn:hover{

box-shadow: 0 0 10px rgba(255,255,255,.5);

transition: all .5s;

}

.footer{

height: 80px;

line-height: 80px;

text-align: center;

font-size: 12px;

color: #fff;

background-color: #07111b;

}

.aside{

position: fixed;

padding: 5px 10px;

right: 0;

top: 50%;

margin-top: -100px;

background: #fff;

box-shadow: 0 0 10px rgba(0,0,0,.5);

z-index: 9;

}

.aside__item{

display: block;

width: 40px;

height: 30px;

border-bottom: 1px solid #edf1f2;

line-height: 30px;

padding: 5px 0;

font-size: 12px;

text-align: center;

}

.aside__item:hover{

color: #f01400;

}

.aside__item:last-child{

border-bottom: none;

}

.aside__item_active{

color: #f01400;

}

var getEle=function(selector){

return document.querySelector(selector);

}

var grtAllEle=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);//获取默认类名

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

setCls(element,baseCls+' '+cls)

}

return

}

//为元素删除样式

var delCls=function(element,cls){

var baseCls=getCls(element);//获取默认类名

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

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

}

return

}

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

'.screen-4__heading',

'.screen-4__type_item_i-1',

'.screen-4__type_item_i-2',

'.screen-4__type_item_i-3',

'.screen-4__type_item_i-4',

'.screen-5':[

'.screen-5__subheading',

'.screen-5__heading',

'.screen-5__bg',

]

}

// 设置屏内元素为初始状态

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');

}

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

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.onload=function(){

for(k in screenAnimateElements){

setScreenAnimateInit(k);

}

// 第二部，滚动到那就播放到哪

window.onscroll=function(){

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

if(top>80){

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

addCls(getEle('.aside'),'aside_in');

}else{

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

delCls(getEle('.aside'),'aside_in');

}

if(top>0){

playScreenAnimateDone('.screen-1');

}

if(top>800*1-200){

playScreenAnimateDone('.screen-2');

}

if(top>800*2-200){

playScreenAnimateDone('.screen-3');

}

if(top>800*3-200){

playScreenAnimateDone('.screen-4');

}

if(top>800*4-200){

playScreenAnimateDone('.screen-5');

}

var navItems=grtAllEle('.header__nav-item');

var setNavJump=function(i){

var item= navItems[i];

item.onclick=function(){

document.body.scrollTop = i*800;

document.documentElement.scrollTop = i*800;

console.log(i);

}

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

setNavJump(i);

}

慕的地1212123 2020-01-30

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

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2020-02-01 10:07:46

同学你好，top只是一个变量，top=document.body.scrollTop是把页面的高度赋值给它，也就是说top的值就是一个数字。top=i*800只是给top这个变量重新赋值了而已。想要改变页面的滚动高度，还是需要直接操作document.body.scrollTop的哦。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕夭夭 2020-01-31 14:41:27

同学你好，a标签的href属性值设置为“#”，点击会返回页面顶部，所以不会跳转。这个是a标签的默认行为，如果a不需要设置具体的链接地址时，建议设置如下，阻止它的默认行为：

另外，头部建议设置固定定位，这样页面滚动时，导航一直在窗口顶部显示：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕的地1212123 #1

老师，因为上面对document.body.scrollTop = i*800; document.documentElement.scrollTop = i*800;这俩进行了变量声明，哪为什么我直接再下面写top=i*800会没有效果呢、

2020-02-01 09:32:52

相似问题

WEB-INF文件下的jsp相互跳转

断点跳转问题

老师，我的form里面的action属性设置之后,为什么不能成功的跳转呢？

#top指跳转到页面顶部，#bottom不是跳转到页面底部吗

老师，表单中的输入框输入格式都正确的话，点击下一步按钮，跳转到慕课网网站；

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

1.前端零基础入门

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

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

了解课程

本课精华内容

问答作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

查看更多本课问答

请稍等 ...

点击不能跳转

点击不能跳转

正在回答

请选择置顶位置