老师求帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 5000px;
background-image: linear-gradient(to bottom, green, pink, blue);
}
#btn {
width: 100px;
height: 100px;
background-color: burlywood;
position: fixed;
bottom: 100px;
right: 100px;
cursor: pointer;
font-size: 20px;
}
ul{
list-style-type: none;
}
.box>.box-ul>li{
width: 1000px;
height: 1000px;
border:1px solid black;
font-size: 60px;
text-align: center;
}
.btn2>.btn-ul{
width: 100px;
height: 100px;
position: fixed;
bottom: 350px;
right: 100px;
cursor: pointer;
font-size: 20px;
text-align: center;
line-height: 50px;
color:#fff;
}
.btn2>.btn-ul>li{
width: 100px;
height: 50px;
border:1px solid black;
background-color:blue;
}
</style>
</head>
<body>
<button id='btn'>回到顶部</button>
<div class='box'>
<ul class='box-ul' id='box-ul'>
<li class='content-part' data-n='1'>一楼</li>
<li class='content-part' data-n='2'>二楼</li>
<li class='content-part' data-n='3'>三楼</li>
<li class='content-part' data-n='4'>四楼</li>
<li class='content-part' data-n='5'>五楼</li>
</ul>
</div>
<div class='btn2'>
<ul class='btn-ul' id='btn-ul'>
<li data-n='1'>1</li>
<li data-n='2'>2</li>
<li data-n='3'>3</li>
<li data-n='4'>4</li>
<li data-n='5'>5</li>
</ul>
</div>
</body>
<script>
var btn = document.getElementById('btn')
var time;
btn.onclick = function () {
clearInterval(time)
time = setInterval(function () {
document.documentElement.scrollTop -= 150;
console.log(document.documentElement.scrollTop)
if (document.documentElement.scrollTop <= 0) {
clearInterval(time)
}
}, 20)
}
var btnUl=document.getElementById('btn-ul')
var boxUl=document.getElementById('box-ul')
var n
var contentPart=document.querySelector('.content-part[data-n='+n+']')
btnUl.onclick=function(e){
if(e.target.tagName.toLowerCase()=='li'){
n=e.target.getAttribute('data-n')
var contentPart=document.querySelector('.content-part[data-n=' + n + ']')
console.log(contentPart.offsetTop)
}
}
</script>
</html>
老师用的是section标签，如果是UL+li标签怎么获取
var contentPart=document.querySelector('.content-part[data-n=' + n + ']')？？这样些不对。请教老师。
正在回答
同学你好，对于同学能够自己发现并解决问题，给同学一个大大的赞，真棒！！！！！
编程是很灵活的，一种效果可以有多种实现方式，同学的写法实现这个效果是没有什么弊端的。
祝学习愉快~
已解决，请老师看下
btnUl.onclick=function(e){
if(e.target.tagName.toLowerCase()=='li'){
var n=e.target.getAttribute('data-n')
console.log(n)
//这里，开始没转过弯
var contentPart=document.getElementsByClassName('content-part')[n-1]
}
document.documentElement.scrollTop=contentPart.offsetTop;
}
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星