3步打造沉浸式单页网站：fullPage.js交互式页面实战指南

2026-02-04 05:05:23作者：幸俭卉

你是否曾被那些滚动流畅、过渡自然的全屏单页网站所吸引？想让自己的网站也拥有这种专业级体验，却苦于实现复杂的滚动逻辑？本文将带你通过3个简单步骤，使用fullPage.js（全页滚动插件）快速构建出具有震撼视觉效果的交互式页面，无需深入钻研复杂的JavaScript滚动算法。

为什么选择fullPage.js？

fullPage.js是由Alvaro Trigo开发的开源JavaScript库，专注于创建全屏滚动网站（也称为单页网站或一页式网站），并支持在页面区块内添加横向滑动效果。它已被包括微软、索尼、三星在内的众多知名企业采用，是构建现代沉浸式网页体验的理想选择。

该项目采用GPLv3开源协议，你可以从仓库获取完整代码：git clone https://gitcode.com/gh_mirrors/fu/fullPage.js

快速上手：3步实现基础全屏滚动

步骤1：引入核心资源

首先需要在HTML文档中引入fullPage.js的CSS和JavaScript文件。推荐使用国内CDN加速访问：

<!-- 引入CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/fullPage.js/4.0.37/fullpage.min.css">

<!-- 引入JavaScript -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/4.0.37/fullpage.min.js"></script>

如果你需要使用除默认外的缓动效果，可以选择性引入easings库：

<!-- 可选：引入缓动效果库 -->
<script src="vendors/easings.min.js"></script>

步骤2：创建基础HTML结构

fullPage.js需要特定的HTML结构：一个包裹所有区块的容器，以及具有.section类的页面区块。每个区块默认会占满整个视口高度。

<div id="fullpage">
    <div class="section active">首页区块</div>
    <div class="section">关于我们</div>
    <div class="section">
        <div class="slide">产品展示1</div>
        <div class="slide">产品展示2</div>
        <div class="slide">产品展示3</div>
    </div>
    <div class="section">联系我们</div>
</div>

#fullpage：包裹所有区块的容器
.section：定义一个全屏区块
.slide：定义区块内的横向滑动页面
.active：标记初始加载时显示的区块

完整示例可参考项目中的simple.html文件。

步骤3：初始化配置

通过简单的JavaScript代码初始化fullPage.js，并根据需要配置选项：

// 基础初始化
var myFullpage = new fullpage('#fullpage', {
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
    navigation: true,
    navigationTooltips: ['首页', '关于我们', '产品展示', '联系我们'],
    showActiveTooltip: true
});

恭喜！现在你已经完成了基础的全屏滚动页面。打开浏览器，你可以通过鼠标滚轮、键盘箭头键或导航点在不同区块间流畅切换。

核心功能与实用技巧

自定义导航与锚点

fullPage.js提供了多种导航方式，让用户可以轻松在不同区块间切换：

new fullpage('#fullpage', {
    // 导航点配置
    navigation: true,
    navigationPosition: 'right',  // 导航点位置：left/right
    navigationTooltips: ['首页', '关于我们', '产品展示', '联系我们'],
    
    // 锚点配置（URL中显示）
    anchors: ['home', 'about', 'products', 'contact'],
    lockAnchors: false  // 是否锁定锚点，禁止通过URL导航
});

配置锚点后，用户可以通过类似#products的URL直接访问对应区块，便于分享和书签收藏。

丰富的滚动效果

fullPage.js内置多种滚动过渡效果，让页面切换更加生动：

new fullpage('#fullpage', {
    // 滚动速度（毫秒）
    scrollingSpeed: 700,
    
    // 缓动效果
    easing: 'easeInOutCubic',  // JS动画缓动
    easingcss3: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',  // CSS3动画缓动
    
    // 滚动方式
    css3: true,  // 使用CSS3 transforms还是JS动画
    autoScrolling: true,  // 是否开启自动滚动
    scrollHorizontally: false,  // 是否允许横向滚动
    
    // 循环滚动
    loopTop: false,  // 顶部是否循环滚动到最后
    loopBottom: false,  // 底部是否循环滚动到最前
    loopHorizontal: true  // 横向滑动是否循环
});

fullPage.js兼容所有现代浏览器及IE 11，同时提供触摸支持，确保在移动设备上也有良好体验。

响应式设计适配

在移动设备上，全屏滚动有时并非最佳体验。fullPage.js提供了完善的响应式配置：

new fullpage('#fullpage', {
    // 响应式断点
    responsiveWidth: 768,  // 宽度小于768px时启用响应式
    responsiveHeight: 0,   // 高度断点，0为禁用
    responsiveSlides: false,  // 是否在响应式模式下将垂直区块转为横向滑动
    
    // 响应式回调
    afterResponsive: function(isResponsive){
        if(isResponsive){
            // 进入响应式模式时执行
            console.log("已进入移动设备模式");
        }else{
            // 退出响应式模式时执行
            console.log("已进入桌面设备模式");
        }
    }
});

你还可以使用fp-auto-height类创建自适应高度的区块，特别适合页脚等不需要全屏显示的内容：

<div class="section fp-auto-height">
    <footer>这是自适应高度的页脚区块</footer>
</div>

媒体元素自动控制

fullPage.js能智能控制区块中的媒体元素，实现进入区块时自动播放，离开时自动暂停：

<div class="section">
    <!-- 自动播放视频 -->
    <video data-autoplay controls>
        <source src="examples/imgs/flowers.mp4" type="video/mp4">
        <source src="examples/imgs/flowers.webm" type="video/webm">
    </video>
    
    <!-- 自动播放音频 -->
    <audio data-autoplay>
        <source src="examples/imgs/horse.mp3" type="audio/mpeg">
        <source src="examples/imgs/horse.ogg" type="audio/ogg">
    </audio>
</div>

如果希望媒体在离开区块后继续播放，可以添加data-keepplaying属性。

进阶应用：回调函数与事件

fullPage.js提供了丰富的回调函数，让你可以在不同滚动阶段执行自定义操作：

new fullpage('#fullpage', {
    // 离开区块时触发
    onLeave: function(origin, destination, direction){
        console.log("离开区块: " + origin.index);
        console.log("前往区块: " + destination.index);
        console.log("方向: " + direction);  // up/down/left/right
    },
    
    // 进入区块后触发
    afterLoad: function(origin, destination, direction){
        console.log("进入区块: " + destination.index);
        
        // 可以在这里触发动画或加载数据
        if(destination.index === 2){
            loadProductData();  // 加载产品数据
            animateProducts();  // 执行产品展示动画
        }
    },
    
    // 横向滑动结束后触发
    afterSlideLoad: function(section, origin, destination, direction){
        console.log("进入滑动页: " + destination.index);
    }
});

利用这些回调函数，你可以实现诸如数据懒加载、元素动画触发、页面分析统计等高级功能。

项目结构与资源

fullPage.js项目结构清晰，便于开发者理解和扩展：

fullPage.js/
├── src/                # 源代码目录
│   ├── css/fullpage.css  # 核心样式
│   └── js/              # JavaScript源代码
├── examples/           # 示例文件
│   ├── simple.html      # 基础示例
│   ├── backgrounds.html # 背景图片示例
│   └── imgs/            # 示例图片资源
├── dist/               # 构建后的分发文件
└── README.md           # 项目文档

官方提供了丰富的示例，涵盖各种功能和使用场景，你可以直接参考这些示例快速实现自己需要的效果：