老师,帮忙看看哪里有错,为啥点击视频的时候没有卷动。

来源:2-13 编程练习

慕的地5368065

2021-05-31 14:17:47

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content-part{
width: 1000px;
margin: 30px auto;
background-color: #ccc;
font-size: 80px;
}
.floornav{
position: fixed;
right: 40px;
height:200px;
width: 120px;
top: 50%;
margin-top: -100;
background-color: orange;

}
.floornav ul{
list-style: none;
}
.floornav ul li{
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 26px;
cursor: pointer;
}
</style>

</head>

<body>
<nav class="floornav">
<ul id="list">
<li data-n="科技">科技</li>
<li data-n="体育">体育</li>
<li data-n="新闻">新闻</li>
<li data-n="娱乐">娱乐</li>
<li data-n="视频">视频</li>
</ul>
</nav>
<section class="content-part" style="height: 655px;" data-n="科技">
科技栏目
</section>
<section class="content-part" style="height: 366px;"data-n="体育">
体育栏目
</section>
<section class="content-part" style="height: 567px;"data-n="新闻">
新闻栏目
</section>
<section class="content-part" style="height: 688px;"data-n="娱乐">
娱乐栏目
</section>
<section class="content-part" style="height: 448px;"data-n="视频">
视频栏目
</section>
<script>
list=document.getElementById('list');
list.onclick=function(e){
if(e.target.tagName.toLowerCase()=='li'){
// getAttribute表示得到标签身上的某个属性值
var n=e.target.getAttribute('data-n');
var contentpart=document.querySelector('.content-part[data-n='+n+']');
document.documentElement.scrollTop=contentpart.offsetTop;
}

}
</script>
</body>

</html>


写回答

1回答

好帮手慕言

2021-05-31

同学你好,点击“视频”是有卷动的,只不过“视频栏目”这项的高度有些小,效果不太明显,建议:可以把“视频栏目”这项的高度调整大一些,例如:
http://img.mukewang.com/climg/60b481f10964d63010160101.jpg

祝学习愉快~

0

0 学习 · 15276 问题

查看课程