如何让HTML按钮实现鼠标滚轮或方向键的网页滚动效果？

以下是满足需求的完整代码，点击底部按钮可切换上下section，无对应section时滚动固定距离：

<!DOCTYPE html>
<html lang="en" style="scroll-snap-type: y mandatory;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Section Navigation</title>
    <style>
        section {
            height: 100vh;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        button {
            position: fixed;
            bottom: 0;
            margin: 5rem;
            padding: 1rem 2rem;
            cursor: pointer;
            font-size: 1.2rem;
            border: none;
            border-radius: 4px;
            background: #333;
            color: white;
        }
    </style>
</head>

<body>
    <section style="background-color: lightsteelblue;">
        <h1>Section 1</h1>
    </section>
    <section style="background-color: pink;">
        <h1>Section 2</h1>
    </section>
    <section style="background-color: lightseagreen;">
        <h1>Section 3</h1>
    </section>
    <button id="downBtn" style="left:0">Down</button>
    <button id="upBtn" style="right:0">Up</button>

    <script>
        const sections = document.querySelectorAll('section');
        const downBtn = document.getElementById('downBtn');
        const upBtn = document.getElementById('upBtn');
        const scrollStep = window.innerHeight * 0.8; // 无section时的滚动距离

        // 获取当前视口对应的section索引
        function getCurrentSectionIndex() {
            const viewportTop = window.scrollY;
            const viewportBottom = viewportTop + window.innerHeight;
            
            for (let i = 0; i < sections.length; i++) {
                const sectionTop = sections[i].offsetTop;
                const sectionBottom = sectionTop + sections[i].offsetHeight;
                // 判断section是否覆盖视口中心（或大部分区域）
                if (sectionTop <= viewportTop + window.innerHeight/2 && sectionBottom >= viewportTop + window.innerHeight/2) {
                    return i;
                }
            }
            // 没有匹配的section，返回-1
            return -1;
        }

        downBtn.addEventListener('click', () => {
            const currentIndex = getCurrentSectionIndex();
            if (currentIndex !== -1 && currentIndex < sections.length - 1) {
                // 滚动到下一个section
                sections[currentIndex + 1].scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            } else {
                // 向下滚动固定距离
                window.scrollBy({
                    top: scrollStep,
                    behavior: 'smooth'
                });
            }
        });

        upBtn.addEventListener('click', () => {
            const currentIndex = getCurrentSectionIndex();
            if (currentIndex > 0) {
                // 滚动到上一个section
                sections[currentIndex - 1].scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            } else {
                // 向上滚动固定距离
                window.scrollBy({
                    top: -scrollStep,
                    behavior: 'smooth'
                });
            }
        });
    </script>
</body>

</html>

关键逻辑说明 #

1. 当前section判断：通过计算视口中心与section的位置关系，精准定位当前处于视口的section，避免滚动位置偏差。
2. section切换：使用scrollIntoView({behavior: 'smooth', block: 'start'})实现平滑滚动，同时匹配scroll-snap的对齐规则，保证section顶部与视口顶部对齐。
3. 无section时的滚动：用window.scrollBy实现固定距离的平滑滚动，滚动距离设为视口高度的80%，接近原生滚轮的滚动幅度。
4. 为何模拟键盘事件无效：浏览器出于安全和行为控制，不会对合成的KeyboardEvent触发原生滚动行为，直接操作滚动API是可靠方案。

内容的提问来源于stack exchange，提问作者Cameron