请教鼠标滚动控制跳转


<section  data-anchor="page1" >
<section  data-anchor="page2" >
<section  data-anchor="page3" >

通过以上给网页内容分块，请问后续要如何写，才能完成鼠标滚动控制跳转

overflow 就 scroll呗

参考代码：
index.html:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="smooth.css">
</head>
<body>
    <div class="content">
        <section class="one">
            <h1>One</h1>
        </section>
        <section class="two">
            <h1>Two</h1>
        </section>
        <section class="three">
            <h1>Three</h1>
        </section>
        <section class="four">
            <h1>Four</h1>
        </section>
    </div>    
</body>
</html>

smooth.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
}

.content {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

.one {
    background-color: lightblue;
}

.two {
    background-color: darkgoldenrod;
}

.three {
    background-color: gold;
}

.four {
    background-color: purple;
}