先来一张效果图
效果图
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="detail">
<div class="top">头部内容</div>
<div class="Content">
<div class='leftContent'>左侧的一些内容</div>
<ul>
<li>
<a herf="" id="child1">首页</a>
</li>
<li>
<a herf="" id="child2">学习中心</a>
</li>
<li>
<a herf="" id="child3">考试中心</a>
</li>
<li>
<a herf="" id="child4">考试动态</a>
</li>
</ul>
<div class="parent">
<div class="child home">子元素1--首页</div>
<div class="child studyCenter">子元素2--学习中心</div>
<div class="child examinationCentre">子元素3--考试中心</div>
<div class="child examinationDynamics">子元素4--考试动态</div>
<div class="child" id="child5">子元素5</div>
<div class="child" id="child6">子元素6</div>
<div class="child" id="child7">子元素7</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin:0;
padding:0;
}
body{
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
.detail{
position: absolute;
top: 0;
left: 0;
/* bottom: 0;
right: 0; */
border: 2px solid red;
}
.top {
border: 1px solid;
position: fixed;
top: 0;
height: 60px;
width: 100vw;
}
.Content {
height: 3900px;
width: 100vw;
border: 1px solid red;
margin-top: 60px;
position: relative;
left: 0px;
/* overflow-y: scroll; */
}
.leftContent {
position: fixed;
left: 0;
border: 1px solid blue;
}
ul {
position: fixed;
right: 0;
list-style-type: none;
margin: 0;
padding: 0;
}
a {
display: block;
background-color: green;
color: white;
width: 80px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover,
a:active {
background-color: #98bf21;
}
.parent {
border: 1px solid green;
width: 160px;
position: absolute;
left: 190px;
}
.child {
height: 550px;
border-top: 1px solid blue;
}
JavaScript
var child1 = document.getElementById('child1');
var child2 = document.getElementById('child2');
var child3 = document.getElementById('child3');
var child4 = document.getElementById('child4');
// 点击首页和考试动态的跳转方式是通过window.scrollTo()
child1.onclick = function(){
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
child4.onclick = function(){
window.scrollTo({
top: 1655,
behavior: "smooth"
});
}
// 点击学习中心和考试中心是通过element.scrollIntoView()
child2.onclick = function(){
document.querySelector('.studyCenter').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
child3.onclick = function(){
document.querySelector('.examinationCentre').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
点击预览
两种跳转方式的详情参考MDN文档：window.scrollTo()和element.scrollIntoView()
element.scrollIntoView()是相对于视口跳转，而window.scrollTo()是根据自定义的位置跳转，从而更加灵活。
