fullPage.js全屏滚动展示完整实战教程(2025最新版)

更新时间：2025年12月19日 10:52:57 作者：Chandler读书学习

fullPage.js是一款知名的JavaScript插件,专为创建全屏滚动效果而设计,这篇文章主要介绍了fullPage.js全屏滚动展示的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

fullPage.js 完整实战教程（2025 最新版）

逻辑清晰 · 内容具体 · 可直接复制运行

一、什么是 fullPage.js？

fullPage.js 是由西班牙开发者 Álvaro Trigo 创建并持续维护的超轻量级全屏滚动库（当前最新版本 4.x），专为打造沉浸式单页网站而生。

文件大小：仅 ~15KB（gzip 后 < 8KB）
无 jQuery 依赖（纯原生 JS）
支持垂直全屏滚动 + 水平 Slide 滑动
完美支持移动端触摸、键盘、鼠标滚轮
内置锚点链接、懒加载、响应式降级
开源 GPLv3 许可，商业项目可购买授权

官网：https://alvarotrigo.com/fullPage/

GitHub：https://github.com/alvarotrigo/fullPage.js

二、核心理念与工作原理

理念	说明
快照式滚动（Snap Scrolling）	滚动时不连续滑动 → 吸附到下一个全屏 section，像 PPT 翻页
滚动劫持	拦截原生滚动事件，用 CSS3 transform 或 JavaScript 控制位置
Section + Slide 结构	垂直方向用 `.section`，水平方向用 `.slide`，层次清晰
状态驱动 + 事件回调	所有交互通过 `onLeave`、`afterLoad`、`afterSlideLoad` 等回调控制
渐进增强	JS 失效时自动降级为普通长页面，SEO 友好

三、适用场景与不适用场景

强烈推荐场景	谨慎使用 / 不推荐场景
品牌官网、产品发布页	内容密集型博客、新闻站
创意作品集、设计师/摄影师个人站	需要精确像素级滚动定位的仪表盘
H5 营销活动页、年会邀请函	超长表单页面
移动端引导页、App 落地页	传统多页企业站（除非只有首页用全屏）
在线简历、交互式故事网站	管理后台、复杂数据表格页面

四、快速上手：完整可运行 Demo

基础垂直全屏滚动（最常用）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fullPage.js 基础示例</title>
  <!-- 1. 引入 CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.css" rel="external nofollow"  rel="external nofollow" >
  <style>
    .section { text-align: center; color: #fff; font-family: "Microsoft YaHei"; }
    .section1 { background: #ff5f57; }
    .section2 { background: #2ecc71; }
    .section3 { background: #3498db; }
    .section4 { background: #9b59b6; }
    h1 { padding-top: 45vh; font-size: 4rem; }
  </style>
</head>
<body>

<div id="fullpage">
  <div class="section section1">
    <h1>第一屏 - 首页</h1>
  </div>
  <div class="section section2">
    <h1>第二屏 - 关于</h1>
  </div>
  <div class="section section3">
    <div class="slide"><h1>产品 A</h1></div>
    <div class="slide"><h1>产品 B</h1></div>
    <div class="slide"><h1>产品 C</h1></div>
  </div>
  <div class="section section4">
    <h1>第四屏 - 联系我们</h1>
  </div>
</div>

<!-- 2. 引入 JS -->
<script src="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.js"></script>
<script>
  new fullpage('#fullpage', {
    // 常用配置项
    autoScrolling: true,           // 启用全屏滚动（默认 true）
    scrollHorizontally: true,      // 水平 slide 可用键盘左右方向键
    navigation: true,              // 右侧小圆点导航
    navigationPosition: 'right',
    anchors: ['home', 'about', 'products', 'contact'], // 锚点，URL 可直接 #about
    lazyLoading: true,             // 懒加载图片/video
    scrollingSpeed: 800,           // 滚动动画时长 ms
    easing: 'easeInOutCubic',      // 缓动函数

    // 常用回调
    afterLoad: function(origin, destination, direction) {
      console.log('已到达：', destination.anchor);
    },
    onLeave: function(origin, destination, direction) {
      console.log('离开', origin.anchor, '→ 前往', destination.anchor);
    }
  });
</script>
</body>
</html>

进阶：带水平 Slide + 响应式降级 + 视频自动播放

new fullpage('#fullpage', {
  licenseKey: 'YOUR_LICENSE_KEY', // 商业项目需填写
  anchors: ['page1', 'page2', 'gallery', 'contact'],
  menu: '#menu',                   // 与顶部导航联动
  navigation: true,
  slidesNavigation: true,          // 水平 slide 底部小点
  responsiveWidth: 1024,           // 宽度 < 1024px 时关闭全屏滚动，恢复普通滚动
  parallax: true,                  // 需要购买 parallax 扩展
  fadingEffect: true,              // 需要购买 fadingEffect 扩展

  // 视频/音频自动播放控制
  onLeave: function(origin, destination, direction) {
    const videos = document.querySelectorAll('video');
    videos.forEach(v => v.pause());
  },
  afterLoad: function(origin, destination) {
    const activeVideo = destination.item.querySelector('video[data-autoplay]');
    if (activeVideo) activeVideo.play();
  }
});

五、核心 API 速查表（最常用）

方法	说明
`fullpage_api.moveSectionDown()`	向下滚动一屏
`fullpage_api.moveSectionUp()`	向上滚动一屏
`fullpage_api.moveTo(section, slide)`	跳转到指定 section（从1开始）与 slide
`fullpage_api.silentMoveTo(section, slide)`	无动画静默跳转
`fullpage_api.setAllowScrolling(false)`	禁止滚动（常用于弹窗时）
`fullpage_api.setScrollingSpeed(1000)`	修改滚动速度
`fullpage_api.reBuild()`	动态添加/删除 section 后调用重建

六、最佳实践与常见坑

场景	推荐做法	常见错误
移动端体验	设置 `responsiveWidth: 768` 或 `responsiveHeight`	完全不做响应式导致手机卡顿
图片/视频性能	使用 `data-src` + `lazyLoading: true`	所有媒体直接 src 加载，首屏加载慢
与其他滚动插件冲突	关闭 fullPage 滚动：`setAllowScrolling(false)`	同时使用 swiper + fullpage
动态添加 section	添加完 DOM 后立即调用 `fullpage_api.reBuild()`	忘记 rebuild 导致新 section 无效
SEO 与分享链接	必须设置 `anchors` 并保留默认滚动降级	只用索引跳转，分享链接无效
商业项目去掉底部版权文字	购买商业授权后填写 `licenseKey`	直接删 DOM 删除（会被检测）

七、推荐配套工具

官方 React 包装：react-fullpage
官方 Vue 包装：@fullpage/vue-fullpage
动画增强：GSAP + fullpage 的 afterLoad / onLeave 回调
无代码平台：在 Webflow、Framer、Readymag 中直接嵌入自定义代码即可

八、结语

fullPage.js 依然是 2025 年打造高端沉浸式单页网站的最佳选择之一。它 API 简洁、文档完善、社区活跃、更新频繁。只要用在合适场景，几乎没有竞品能在同等体积下提供如此丝滑的体验。

立即上手：

官方在线示例合集：https://alvarotrigo.com/fullPage/examples/

CDN 快速引用：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.css" rel="external nofollow"  rel="external nofollow" >
<script src="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.js"></script>

祝你做出炫酷的全屏滚动网站！

到此这篇关于fullPage.js全屏滚动展示的文章就介绍到这了,更多相关fullPage.js全屏滚动展示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript 中按属性值查找数组中的对象多种方法
JavaScript 数组可以保存混合类型的不同值，例如字符串、空值或布尔值，并且不需要数组的大小来指定它在哪里自动增长和动态，这篇文章主要介绍了javascript 中按属性值查找数组中的对象多种方法,需要的朋友可以参考下
2023-06-06
Javascript实现Web颜色值转换
这篇文章主要介绍了Javascript实现Web颜色值转换,需要的朋友可以参考下
2015-02-02
Javascript立即执行函数(IIFE)实例详解
IIFE全拼Imdiately Invoked Function Expression,是一个在定义的时候就立即执行的JavaScript函数,这篇文章主要给大家介绍了关于Javascript立即执行函数的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
layui+ssm实现数据批量删除功能
本篇文章给大家介绍layui+ssm实现数据批量删除功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
详解小程序之简单登录注册表单验证
这篇文章主要介绍了小程序之简单登录注册表单验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
Javascript实现倒计时时差效果
这篇文章主要为大家详细介绍了Javascript实现倒计时时差效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JavaScript 语言精粹学习笔记
JavaScript建立在一些非常好的想法和少数非常坏的想法之上。
2009-08-08
js计算精度问题小结
js计算精度问题小结，需要的朋友可以参考一下
2013-04-04
js实现导航栏中英文切换效果
本篇文章主要分享了javascript实现导航栏中英文切换效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
Bootstrap实现下拉菜单多级联动
这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单多级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11