jQuery全屏滚动插件fullPage.js

简介

现在非常流行全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如苹果官网，QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。 fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：

fullPage.js 全面介绍与配置详解

fullPage.js 是一个专注于创建全屏滚动单页网站的轻量级前端库，通过简单配置即可实现流畅的垂直/水平全屏滚动效果，广泛应用于品牌落地页、产品展示页、创意简历等场景。

---

一、核心特性

• ✅ 全屏滚动：支持垂直滚动（section）和水平滚动（slide），自动适配屏幕高度/宽度
• ✅ 导航系统：内置侧边导航点、顶部导航栏、锚点链接，支持自定义样式
• ✅ 丰富动画：支持 CSS3 缓动动画、元素入场动画（需配合 animate.css）
• ✅ 响应式设计：可设置断点，在小屏设备上自动切换为普通滚动模式
• ✅ 回调函数：提供滚动前、滚动后、渲染完成等多阶段回调
• ✅ 兼容性好：支持现代浏览器（Chrome/Firefox/Safari/Edge），有纯 JS 版本（无需 jQuery）

---

二、快速上手

1. 安装

方式1：npm 安装（推荐）

npm install fullpage.js --save

方式2：CDN 引入

<!-- 核心 CSS -->
<link rel="stylesheet" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">
<!-- 核心 JS -->
<script src="https://unpkg.com/fullpage.js/dist/fullpage.min.js"></script>

2. 基础 HTML 结构

<div id="fullpage">
  <!-- 每个 section 是一个全屏页 -->
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">
    <!-- 水平滚动 slide（可选） -->
    <div class="slide">第二屏-第一页</div>
    <div class="slide">第二屏-第二页</div>
  </div>
  <div class="section">第四屏</div>
</div>

3. 初始化

// 纯 JS 版本初始化
new fullpage('#fullpage', {
  // 配置项（见下文详解）
  sectionsColor: ['#f00', '#0f0', '#00f', '#ff0'], // 每屏背景色
  navigation: true, // 显示侧边导航点
  anchors: ['page1', 'page2', 'page3', 'page4'], // 锚点链接
});

---

三、配置详解

1. 核心配置

配置项	类型	默认值	说明
sectionsColor	Array	[]	每屏背景色，如 ['#fff', '#000']
anchors	Array	[]	每屏锚点，用于 URL 哈希，如 ['home', 'about']
lockAnchors	Boolean	false	是否锁定锚点（禁止 URL 哈希变化）
css3	Boolean	true	是否使用 CSS3 transforms（性能更好）
scrollingSpeed	Number	700	滚动动画时长（毫秒）
easing	String	'easeInOutCubic'	滚动缓动函数（CSS3 或 jQuery easing）
easingcss3	String	'ease'	CSS3 缓动函数，如 'ease-in-out'

2. 导航配置

配置项	类型	默认值	说明
navigation	Boolean	false	是否显示侧边导航点
navigationPosition	String	'right'	导航点位置：'right'/'left'
navigationTooltips	Array	[]	导航点提示文字，如 ['首页', '关于']
showActiveTooltip	Boolean	false	是否始终显示当前屏的提示文字
slidesNavigation	Boolean	false	是否显示水平 slide 的导航
slidesNavPosition	String	'bottom'	slide 导航位置：'top'/'bottom'
controlArrows	Boolean	true	是否显示 slide 左右箭头
controlArrowColor	String	'#fff'	箭头颜色

3. 滚动配置

配置项	类型	默认值	说明
autoScrolling	Boolean	true	是否启用自动全屏滚动（false 为普通滚动）
fitToSection	Boolean	true	是否自动贴合 section 顶部
fitToSectionDelay	Number	1000	贴合延迟（毫秒）
scrollBar	Boolean	false	是否显示浏览器滚动条
loopTop	Boolean	false	顶部是否循环（第一屏向上滚到最后一屏）
loopBottom	Boolean	false	底部是否循环（最后一屏向下滚到第一屏）
loopHorizontal	Boolean	true	slide 是否循环
continuousVertical	Boolean	false	是否启用连续垂直滚动（替代 loopTop/loopBottom）
scrollOverflow	Boolean	false	section 内容超出时是否允许内部滚动
normalScrollElements	String	''	允许普通滚动的元素选择器，如 '.scroll-box'
touchSensitivity	Number	5	触摸滑动灵敏度（1-10）

4. 响应式配置

配置项	类型	默认值	说明
responsiveWidth	Number	0	响应式断点宽度（像素），小于此值自动禁用全屏滚动
responsiveHeight	Number	0	响应式断点高度
responsive	Number	0	同时设置宽高断点（替代上面两个）

5. 回调函数配置

配置项	类型	说明
afterLoad	Function	滚动到某屏后触发，参数：(origin, destination, direction)
onLeave	Function	离开某屏前触发，参数：(origin, destination, direction)
afterRender	Function	页面渲染完成后触发
afterResize	Function	窗口 resize 后触发
afterReBuild	Function	调用 reBuild() 后触发
afterSlideLoad	Function	滚动到某 slide 后触发
onSlideLeave	Function	离开某 slide 前触发

---

四、常用方法

初始化后可通过实例调用方法：

const fp = new fullpage('#fullpage', { /* 配置 */ });

// 1. 滚动到指定 section（索引从1开始，或锚点名）
fp.moveTo(2); // 滚动到第2屏
fp.moveTo('about'); // 滚动到锚点为 'about' 的屏

// 2. 向上/向下滚动
fp.moveSectionUp();
fp.moveSectionDown();

// 3. 滚动到指定 slide（section索引, slide索引）
fp.moveSlideRight(); // 下一个 slide
fp.moveSlideLeft(); // 上一个 slide

// 4. 启用/禁用滚动
fp.setAllowScrolling(false); // 禁用滚动
fp.setAllowScrolling(true); // 启用滚动

// 5. 重新构建（动态修改内容后调用）
fp.reBuild();

// 6. 销毁 fullPage.js
fp.destroy('all'); // 完全销毁，恢复普通滚动

---

五、注意事项

1. 协议说明：fullPage.js 免费版为 GPL 协议（开源项目可免费使用），商业项目需购买商业授权。
2. 兼容性：纯 JS 版本支持现代浏览器，如需兼容 IE11 可使用旧版（需 jQuery）。
3. 性能优化：section 数量建议控制在 10 屏以内，过多可能影响性能。
4. 锚点冲突：使用 anchors 时避免与页面内其他元素 ID 重复。