<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a {
display: inline-block;
width: 100px;
margin-right:100px;
}
nav, scroll-container {
display: block;
margin: 50px 200px;;
text-align: center;
}
nav {
width: 60%;
padding: 25px;
border: 2px solid yellow;
}
scroll-container {
display: block;
width: 60%;
height: 500px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
</head>
<body>
<nav>
<a href="#page-1">选项1</a>
<a href="#page-2">选项2</a>
<a href="#page-3">选项3</a>
</nav>
<scroll-container>
<scroll-page id="page-1">
hello guys!
</scroll-page>
<scroll-page id="page-2">
welcome to you!
</scroll-page>
<scroll-page id="page-3">
wish to with you!
</scroll-page>
</scroll-container>
</body>
</html>
效果图：