能否实现独立HTML页面间的向下滚动切换效果？

这个需求完全可行，但因为你当前用的是独立HTML文件，传统页面跳转会触发刷新，所以要实现滚动触发的平滑过渡，得避开页面刷新的逻辑，下面给你两种核心实现方向：

一、改用单页结构（推荐，实现成本最低） #

把index、home、contact的内容整合到同一个HTML文件中，用区块划分每个页面的内容，结合CSS和少量JS实现滚动吸附与平滑切换，同时保留按钮跳转功能：

具体做法 #

1. 用全屏容器包裹每个页面内容，每个容器设置100vh高度，确保占满视口
2. 用CSS scroll-snap实现滚动自动吸附到每个页面，搭配scroll-behavior: smooth实现平滑过渡
3. 按钮跳转直接调用scrollIntoView方法，触发平滑滚动到目标区块

代码示例（整合后的单页结构） #

<!DOCTYPE html>
<html>
<head>
    <style>
        html {
            scroll-behavior: smooth; /* 全局平滑滚动 */
            margin: 0;
            padding: 0;
        }
        .page-container {
            scroll-snap-type: y mandatory; /* 垂直方向强制滚动吸附 */
            overflow-y: scroll;
            height: 100vh;
        }
        .page {
            height: 100vh;
            width: 100%;
            scroll-snap-align: start; /* 滚动到区块顶部时吸附 */
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
        }
        /* 给不同页面加背景区分 */
        #index-page { background-color: #f5f5f5; }
        #home-page { background-color: #e8e8e8; }
        #contact-page { background-color: #dcdcdc; }
    </style>
</head>
<body>
    <div class="page-container">
        <div id="index-page" class="page">
            <div>
                <h1>Index 页面</h1>
                <button onclick="document.getElementById('home-page').scrollIntoView({behavior: 'smooth'})">跳转至 Home</button>
            </div>
        </div>
        <div id="home-page" class="page">
            <h1>Home 页面</h1>
        </div>
        <div id="contact-page" class="page">
            <h1>Contact 页面</h1>
        </div>
    </div>
</body>
</html>

二、保留多文件结构（适合不想合并页面的场景） #

如果坚持用独立的HTML文件，需要通过AJAX异步加载其他页面的内容到当前页面，再结合滚动监听实现平滑过渡：

核心思路 #

1. 监听滚动事件，当滚动到当前页面底部时，用fetch加载下一个页面的HTML内容
2. 将加载的内容插入到当前页面的容器中，然后平滑滚动到新内容区域
3. 按钮跳转直接触发加载对应页面内容并滚动

代码示例（AJAX加载逻辑） #

// 标记是否已加载过home页面，避免重复加载
let isHomeLoaded = false;

// 滚动监听逻辑
window.addEventListener('scroll', () => {
    const scrollBottom = window.scrollY + window.innerHeight;
    const pageHeight = document.documentElement.scrollHeight;
    // 距离页面底部100px时触发加载
    if (scrollBottom >= pageHeight - 100 && !isHomeLoaded) {
        fetch('home.html')
            .then(res => res.text())
            .then(html => {
                const contentWrap = document.createElement('div');
                contentWrap.innerHTML = html;
                document.body.appendChild(contentWrap);
                isHomeLoaded = true;
                // 平滑滚动到新加载的内容
                window.scrollTo({
                    top: pageHeight,
                    behavior: 'smooth'
                });
            });
    }
});

// 按钮跳转逻辑
document.querySelector('#go-home-btn').addEventListener('click', () => {
    if (isHomeLoaded) {
        // 已加载则直接滚动
        document.querySelector('#home-content').scrollIntoView({behavior: 'smooth'});
    } else {
        // 未加载则加载后滚动
        fetch('home.html')
            .then(res => res.text())
            .then(html => {
                const contentWrap = document.createElement('div');
                contentWrap.innerHTML = html;
                document.body.appendChild(contentWrap);
                isHomeLoaded = true;
                contentWrap.scrollIntoView({behavior: 'smooth'});
            });
    }
});

注意点 #

• 需要给每个页面的内容加唯一标识（比如id="home-content"），方便滚动定位
• 加载的HTML中的脚本不会自动执行，若页面有自定义脚本，需要手动提取并运行
• 要处理加载失败的异常情况，避免用户体验受损

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