fullPage.js全屏滾動(dòng)展示完整實(shí)戰(zhàn)教程(2025最新版)
更新時(shí)間：2025年12月19日 10:52:57 作者：Chandler讀書學(xué)習(xí)
fullPage.js是一款知名的JavaScript插件,專為創(chuàng)建全屏滾動(dòng)效果而設(shè)計(jì),這篇文章主要介紹了fullPage.js全屏滾動(dòng)展示的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
fullPage.js 完整實(shí)戰(zhàn)教程（2025 最新版）
邏輯清晰 · 內(nèi)容具體 · 可直接復(fù)制運(yùn)行
一、什么是 fullPage.js？
fullPage.js 是由西班牙開發(fā)者 Álvaro Trigo 創(chuàng)建并持續(xù)維護(hù)的超輕量級(jí)全屏滾動(dòng)庫（當(dāng)前最新版本 4.x），專為打造沉浸式單頁網(wǎng)站而生。
- 文件大?。簝H ~15KB（gzip 后 < 8KB）
- 無 jQuery 依賴（純?cè)?JS）
- 支持垂直全屏滾動(dòng) + 水平 Slide 滑動(dòng)
- 完美支持移動(dòng)端觸摸、鍵盤、鼠標(biāo)滾輪
- 內(nèi)置錨點(diǎn)鏈接、懶加載、響應(yīng)式降級(jí)
- 開源 GPLv3 許可，商業(yè)項(xiàng)目可購(gòu)買授權(quán)
官網(wǎng)：https://alvarotrigo.com/fullPage/
GitHub：https://github.com/alvarotrigo/fullPage.js
二、核心理念與工作原理
| 理念 | 說明 |
|---|---|
| 快照式滾動(dòng)（Snap Scrolling） | 滾動(dòng)時(shí)不連續(xù)滑動(dòng) → 吸附到下一個(gè)全屏 section，像 PPT 翻頁 |
| 滾動(dòng)劫持 | 攔截原生滾動(dòng)事件，用 CSS3 transform 或 JavaScript 控制位置 |
| Section + Slide 結(jié)構(gòu) | 垂直方向用 .section，水平方向用 .slide，層次清晰 |
| 狀態(tài)驅(qū)動(dòng) + 事件回調(diào) | 所有交互通過 onLeave、afterLoad、afterSlideLoad 等回調(diào)控制 |
| 漸進(jìn)增強(qiáng) | JS 失效時(shí)自動(dòng)降級(jí)為普通長(zhǎng)頁面，SEO 友好 |
三、適用場(chǎng)景與不適用場(chǎng)景
| 強(qiáng)烈推薦場(chǎng)景 | 謹(jǐn)慎使用 / 不推薦場(chǎng)景 |
|---|---|
| 品牌官網(wǎng)、產(chǎn)品發(fā)布頁 | 內(nèi)容密集型博客、新聞?wù)?/td> |
| 創(chuàng)意作品集、設(shè)計(jì)師/攝影師個(gè)人站 | 需要精確像素級(jí)滾動(dòng)定位的儀表盤 |
| H5 營(yíng)銷活動(dòng)頁、年會(huì)邀請(qǐng)函 | 超長(zhǎng)表單頁面 |
| 移動(dòng)端引導(dǎo)頁、App 落地頁 | 傳統(tǒng)多頁企業(yè)站（除非只有首頁用全屏） |
| 在線簡(jiǎn)歷、交互式故事網(wǎng)站 | 管理后臺(tái)、復(fù)雜數(shù)據(jù)表格頁面 |
四、快速上手：完整可運(yùn)行 Demo
基礎(chǔ)垂直全屏滾動(dòng)（最常用）
<!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 基礎(chǔ)示例</title>
<!-- 1. 引入 CSS -->
<link rel="stylesheet" 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>第二屏 - 關(guān)于</h1>
</div>
<div class="section section3">
<div class="slide"><h1>產(chǎn)品 A</h1></div>
<div class="slide"><h1>產(chǎn)品 B</h1></div>
<div class="slide"><h1>產(chǎn)品 C</h1></div>
</div>
<div class="section section4">
<h1>第四屏 - 聯(lián)系我們</h1>
</div>
</div>
<!-- 2. 引入 JS -->
<script src="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.js"></script>
<script>
new fullpage('#fullpage', {
// 常用配置項(xiàng)
autoScrolling: true, // 啟用全屏滾動(dòng)（默認(rèn) true）
scrollHorizontally: true, // 水平 slide 可用鍵盤左右方向鍵
navigation: true, // 右側(cè)小圓點(diǎn)導(dǎo)航
navigationPosition: 'right',
anchors: ['home', 'about', 'products', 'contact'], // 錨點(diǎn)，URL 可直接 #about
lazyLoading: true, // 懶加載圖片/video
scrollingSpeed: 800, // 滾動(dòng)動(dòng)畫時(shí)長(zhǎng) ms
easing: 'easeInOutCubic', // 緩動(dòng)函數(shù)
// 常用回調(diào)
afterLoad: function(origin, destination, direction) {
console.log('已到達(dá)：', destination.anchor);
},
onLeave: function(origin, destination, direction) {
console.log('離開', origin.anchor, '→ 前往', destination.anchor);
}
});
</script>
</body>
</html>
進(jìn)階：帶水平 Slide + 響應(yīng)式降級(jí) + 視頻自動(dòng)播放
new fullpage('#fullpage', {
licenseKey: 'YOUR_LICENSE_KEY', // 商業(yè)項(xiàng)目需填寫
anchors: ['page1', 'page2', 'gallery', 'contact'],
menu: '#menu', // 與頂部導(dǎo)航聯(lián)動(dòng)
navigation: true,
slidesNavigation: true, // 水平 slide 底部小點(diǎn)
responsiveWidth: 1024, // 寬度 < 1024px 時(shí)關(guān)閉全屏滾動(dòng)，恢復(fù)普通滾動(dòng)
parallax: true, // 需要購(gòu)買 parallax 擴(kuò)展
fadingEffect: true, // 需要購(gòu)買 fadingEffect 擴(kuò)展
// 視頻/音頻自動(dòng)播放控制
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() | 向下滾動(dòng)一屏 |
fullpage_api.moveSectionUp() | 向上滾動(dòng)一屏 |
fullpage_api.moveTo(section, slide) | 跳轉(zhuǎn)到指定 section（從1開始）與 slide |
fullpage_api.silentMoveTo(section, slide) | 無動(dòng)畫靜默跳轉(zhuǎn) |
fullpage_api.setAllowScrolling(false) | 禁止?jié)L動(dòng)（常用于彈窗時(shí)） |
fullpage_api.setScrollingSpeed(1000) | 修改滾動(dòng)速度 |
fullpage_api.reBuild() | 動(dòng)態(tài)添加/刪除 section 后調(diào)用重建 |
六、最佳實(shí)踐與常見坑
| 場(chǎng)景 | 推薦做法 | 常見錯(cuò)誤 |
|---|---|---|
| 移動(dòng)端體驗(yàn) | 設(shè)置 responsiveWidth: 768 或 responsiveHeight | 完全不做響應(yīng)式導(dǎo)致手機(jī)卡頓 |
| 圖片/視頻性能 | 使用 data-src + lazyLoading: true | 所有媒體直接 src 加載，首屏加載慢 |
| 與其他滾動(dòng)插件沖突 | 關(guān)閉 fullPage 滾動(dòng)：setAllowScrolling(false) | 同時(shí)使用 swiper + fullpage |
| 動(dòng)態(tài)添加 section | 添加完 DOM 后立即調(diào)用 fullpage_api.reBuild() | 忘記 rebuild 導(dǎo)致新 section 無效 |
| SEO 與分享鏈接 | 必須設(shè)置 anchors 并保留默認(rèn)滾動(dòng)降級(jí) | 只用索引跳轉(zhuǎn)，分享鏈接無效 |
| 商業(yè)項(xiàng)目去掉底部版權(quán)文字 | 購(gòu)買商業(yè)授權(quán)后填寫 licenseKey | 直接刪 DOM 刪除（會(huì)被檢測(cè)） |
七、推薦配套工具
- 官方 React 包裝：
react-fullpage - 官方 Vue 包裝：
@fullpage/vue-fullpage - 動(dòng)畫增強(qiáng)：GSAP + fullpage 的
afterLoad/onLeave回調(diào) - 無代碼平臺(tái)：在 Webflow、Framer、Readymag 中直接嵌入自定義代碼即可
八、結(jié)語
fullPage.js 依然是 2025 年打造高端沉浸式單頁網(wǎng)站的最佳選擇之一。它 API 簡(jiǎn)潔、文檔完善、社區(qū)活躍、更新頻繁。只要用在合適場(chǎng)景，幾乎沒有競(jìng)品能在同等體積下提供如此絲滑的體驗(yàn)。
立即上手：
官方在線示例合集：https://alvarotrigo.com/fullPage/examples/
CDN 快速引用：
<link rel="stylesheet" rel="external nofollow" rel="external nofollow" > <script src="https://cdn.jsdelivr.net/npm/fullpage.js@4/dist/fullpage.min.js"></script>
祝你做出炫酷的全屏滾動(dòng)網(wǎng)站！
到此這篇關(guān)于fullPage.js全屏滾動(dòng)展示的文章就介紹到這了,更多相關(guān)fullPage.js全屏滾動(dòng)展示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript 中按屬性值查找數(shù)組中的對(duì)象多種方法
JavaScript 數(shù)組可以保存混合類型的不同值，例如字符串、空值或布爾值，并且不需要數(shù)組的大小來指定它在哪里自動(dòng)增長(zhǎng)和動(dòng)態(tài)，這篇文章主要介紹了javascript 中按屬性值查找數(shù)組中的對(duì)象多種方法,需要的朋友可以參考下2023-06-06
Javascript實(shí)現(xiàn)Web顏色值轉(zhuǎn)換
這篇文章主要介紹了Javascript實(shí)現(xiàn)Web顏色值轉(zhuǎn)換,需要的朋友可以參考下2015-02-02
Javascript立即執(zhí)行函數(shù)(IIFE)實(shí)例詳解
IIFE全拼Imdiately?Invoked?Function?Expression,是一個(gè)在定義的時(shí)候就立即執(zhí)行的JavaScript函數(shù),這篇文章主要給大家介紹了關(guān)于Javascript立即執(zhí)行函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
layui+ssm實(shí)現(xiàn)數(shù)據(jù)批量刪除功能
本篇文章給大家介紹layui+ssm實(shí)現(xiàn)數(shù)據(jù)批量刪除功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
詳解小程序之簡(jiǎn)單登錄注冊(cè)表單驗(yàn)證
這篇文章主要介紹了小程序之簡(jiǎn)單登錄注冊(cè)表單驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Javascript實(shí)現(xiàn)倒計(jì)時(shí)時(shí)差效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)倒計(jì)時(shí)時(shí)差效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript建立在一些非常好的想法和少數(shù)非常壞的想法之上。2009-08-08
js計(jì)算精度問題小結(jié)，需要的朋友可以參考一下2013-04-04
js實(shí)現(xiàn)導(dǎo)航欄中英文切換效果
本篇文章主要分享了javascript實(shí)現(xiàn)導(dǎo)航欄中英文切換效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
Bootstrap實(shí)現(xiàn)下拉菜單多級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)下拉菜單多級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11