我之前也碰到过一模一样的场景，核心问题在于fullpage默认会锁定页面的全局滚动逻辑，强制用它的全屏滚动机制，所以要实现滚动到最后一个section后能正常访问footer，我们需要在合适的时机切换fullpage的滚动模式。

下面是具体的解决方案：

核心思路 #

当滚动到main内的最后一个section时，禁用fullpage的自动全屏滚动，让页面恢复原生滚动行为，这样就能正常滚动到footer；当从footer向上滚动回到最后一个section时，再重新启用fullpage的全屏滚动功能。

代码实现（jQuery版本） #

假设你用的是jQuery风格的fullpage初始化，修改你的代码如下：

$("main").fullpage({
    sectionSelector: "> *",
    // 加载完成某个section时触发的回调
    afterLoad: function(origin, destination, direction) {
        // 判断当前是否是最后一个section
        if (destination.isLast) {
            // 禁用fullpage自动滚动，恢复页面原生滚动
            $.fn.fullpage.setAutoScrolling(false);
        }
    },
    // 离开某个section时触发的回调
    onLeave: function(origin, destination, direction) {
        // 如果是从最后一个section向上滚动，恢复fullpage自动滚动
        if (origin.isLast && direction === "up") {
            $.fn.fullpage.setAutoScrolling(true);
        }
    }
});

代码实现（原生JS版本） #

如果你用的是新版fullpage的原生API，写法如下：

const fpInstance = new fullpage("main", {
    sectionSelector: "> *",
    afterLoad: function(origin, destination, direction) {
        if (destination.isLast) {
            fullpage_api.setAutoScrolling(false);
        }
    },
    onLeave: function(origin, destination, direction) {
        if (origin.isLast && direction === "up") {
            fullpage_api.setAutoScrolling(true);
        }
    }
});

关键注意事项 #

• 确保你的footer标签不在main容器内部，你的页面结构是正确的，这是实现功能的前提。
• 如果你的最后一个section内部内容需要滚动（比如内容超出屏幕），可以给该section单独配置scrollOverflow: true，这和滚动到footer的需求不冲突。
• 如果你希望页面始终显示原生滚动条，可以在初始化时添加scrollBar: true配置，这样用户会更直观地感知到还有footer内容可以滚动。

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