先来一张效果图

效果图

HTML

JS Bin

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()是根据自定义的位置跳转，从而更加灵活。