为全页面滚动设计打造的 最佳解决方案

节省开发时间 — 只需几分钟即可创建全屏滚动 website。

获取 fullPage →
  • 预览
  • JS
  • jQuery
  • React
  • Vue
  • Angular

受到全球最具创新性公司的信赖

👆 点击查看使用方式

更多 不仅仅是滚动对齐效果

Anchors
直接链接到任何部分。提高可分享性和 SEO。
example.com /#home /#about-us /#contact
首页
关于我们
Contact
Infinite Scroll
感觉无尽的滚动。非常适合讲故事、作品集或沉浸式体验。
1
2
3
Custom Speed
控制节奏以获得流畅的滚动体验。匹配您网站的风格。
Section 1
Section 2
Section 3
Speed 700ms
Events
使用 callbacks 根据 slider 的状态触发特定事件。
Section 1
Section 2
Section 3
Callback Log Initialized...
Developers API
使用内置方法动态控制页面的流程。
moveSectionDown moveTo(1) moveTo(3) setScrollingSpeed(500) getActiveSlide destroy setLockAnchors(true) getScrollY
setAllowScrolling(false) setAllowScrolling(true) setKeyboardScrolling(false) reBuild getActiveSection moveSlideLeft moveSectionUp getScrollX
silentMoveTo(2) setFitToSection(false) setResponsive(true) setRecordHistory(false) fitToSection setKeyboardScrolling(true) moveSlideRight setAutoScrolling(true)
Bidirectional scroll
构建垂直和水平滚动的布局。不要限制您的导航。
Slide 1.1
Slide 1.2
Slide 2.1
Slide 2.2
Section 3
Lazy Load
只在用户需要时加载他们需要的内容。确保性能保持流畅,带宽费用保持较低。
Beautiful Effects
令人眼花缭乱的 slide 过渡变得简单。以最少的设置和最大的影响提升用户体验。

适合 fullPage.js 谁?

Developers
更快地构建交互式全屏网站 — 无需重新发明轮子。非常适合作品集、产品页面和现代 Web 应用程序。
  • 适用于 React、Vue、Angular、jQuery、WordPress、Webflow...
  • 强大的 API,具有完整的事件控制
  • 节省数小时的编码时间。使用生产就绪且经过实战检验的解决方案。

35,306 Web 开发者 喜欢 fullPage.js!

直接听取依赖 fullPage.js 节省时间并交付漂亮全页网站的开发者和设计师的意见。

为什么选择 fullPage.js?💪

无需重新发明轮子,即可释放全页滚动交互的力量。fullPage.js 为您处理困难的部分。

功能fullPage.jsCSS Scroll Snap
跨平台一致的行为
fullPage.js 确保您的全页面滚动网站在所有平台上表现一致 — 无论是桌面端还是移动端,Safari、Chrome 或 Firefox。没有意外的跳动或损坏的滚动效果,始终保持流畅、可靠的体验。
平滑的鼠标滚动
避免使用 CSS Scroll Snap 时常见的鼠标滚轮跳动问题。fullPage.js 提供真正顺滑的滚动体验。
可自定义滚动速度
流畅体验源于精准速度控制。

使用 fullPage.js,您可以自由设置滚动速度,打造理想的过渡节奏 — 这是原生浏览器滚动对齐无法实现的。
可自定义滚动延迟
根据您的页面需求,自定义滚动对齐的延迟时间。

fullPage.js 提供精确控制,而 CSS Scroll Snap 在不同浏览器中会有不一致表现。
一次滚动一个部分
避免跳过内容。

fullPage.js 一次滚动一个部分 — 即使快速滑动或使用触控板,也能保持顺畅的过渡与聚焦体验。
自定义缓动动画
自定义 easing 动画让滚动更具风格 — 不再是 CSS Scroll Snap 的生硬跳动。可在 这里这里 查看示例。 - 演示
内部可滚动区域
支持在每个全屏部分中添加可滚动内容 — 无需担心内容溢出或被裁剪。 - 演示
Custom
平滑滚动到页脚
可无缝滚动至非全屏部分(如页脚),保持自然的过渡效果。 - 演示
无限滚动
无限滚动让用户在到达最后一个幻灯片后依然可以继续上下或左右滚动,保持持续互动。 - 演示
循环滚动
循环滚动让页面在末尾自动回到开头,实现无缝循环效果。 - 演示
切换动画效果
支持 20+ 种独特的滑动动画,为每次切换增添动感与视觉冲击。 - 演示
视差滚动
使用 fullPage.js 可轻松在部分与幻灯片之间应用视差效果,为网站增加层次感与动态视觉体验。 - 演示
回调函数支持
通过回调函数,您可以在滚动时触发自定义代码,用于动画、分析或动态内容加载。 - 演示
URL 锚点
支持为每个部分设置 URL 锚点,实现深度链接、分享与书签保存,例如 #pricing#features。 - 演示
响应式设计
可自定义断点以禁用对齐、调整部分大小或将水平幻灯片切换为垂直(付费扩展),在任何设备上保持流畅体验。 - 演示 1 - 演示 2
JS 框架集成
fullPage.js 提供 ReactVueAngular 的集成版本,让开发更高效。
Custom
鼠标拖拽
在桌面端实现类似触摸的体验,可通过鼠标拖拽自然切换部分。 - 演示
鼠标水平滚动
上下滚动即可实现横向切换,非常适合轮播、时间线或故事叙述场景。 - 演示
URL 历史记录
在滚动时记录 URL 历史,使用户可以通过浏览器的前进/后退按钮返回之前的部分。
导航圆点
内置导航圆点,无需自行实现。FullPage.js 自动处理点击、激活状态及提示信息。 - 演示
Custom
懒加载
懒加载页面部分以提升性能,只在需要时加载内容,保持网站快速流畅。 - 演示
CSS 状态类
FullPage.js 自动添加状态类,可用于根据滚动位置、活动部分或响应模式应用 CSS 条件样式。 - 演示
媒体自动播放/暂停
自动播放或暂停视频与音频 — 进入部分时播放,离开时暂停,无需额外脚本即可保持整洁体验。 - 演示
跳过中间部分
可直接跳转至目标部分,跳过中间动画,加快导航速度与响应。 - 演示

使用您喜爱的技术

在几分钟内将 fullPage.js 集成到您的技术栈中。
无论您使用什么工具。

加入 35,400 Web 开发者

世界各地的开发者使用 fullPage.js slider 来节省时间、金钱,并快速创建漂亮的网站。

👉 Get It Now!

fullPage.js 对我们来说是一个绝对的改变游戏规则的工具。它为我们节省了数天的开发时间,让我们能够专注于完善客户项目的其他关键方面。

ARTEM

CodeDrips 机构总监

Browser Compatible
100% 浏览器兼容
Snap to Footer
Scroll Snap Everywhere
GPU Accelerated
流畅的滚动体验
Lightweight
无依赖。Vanilla JS。
Responsive
移动友好。条件断点。
Scroll Inside Sections
不要害怕添加内容。
👉 Get It Now!

网站 脱颖而出 使用 fullPage.js

👉 查看使用 fullPage.js 构建的网站

fullPage.js 数据

从独立开发者到全球品牌,fullPage.js 已帮助数万人实现他们的创意愿景。