Foto

CRISTIAN NAVARRO

PhD Candidate in Economics, CEMFI
cristian.navarro@cemfi.edu.es

About
Research
Teaching

fullPage.js

fullPage.js

preview compatibility

English | Español | Français | Pусский | 中文 | 한국어 | Português Brasileiro

适用于 Vue , React 和 Angular

fullPage.js version License PayPal Donate jsDelivr Hits Minzipped Size   |   Created by @imac2

通过调用本库可轻易创建全屏滚动网站(也称为单页网站)。 本库可创建全屏滚动网站，同时也可在网站中添加横向滚动条。

介绍

不仅限于提需求，也欢迎提出编码风格改进的建议。 集思广益，让这个库更加强大，让写代码更轻松！

兼容性

fullPage.js is fully functional on all modern browsers and with IE 11. If you need to support IE < 11 consider using fullPage.js v3. It also provides touch support for mobile phones, tablets and touch screen computers.

特别感谢 Browserstack 支持 fullpage.js 。

许可证

商业许可证

如果您想使用 fullPage 开发商业网站、主题、项目和应用程序，商业许可证是您应使用的许可证。使用这个许可证，您的源代码将保留专有权。 这意味着，您不必将整个应用程序源代码更改为开源许可证。点击此处购买fullpage 商业许可证

开源许可证

如果您使用与 GNU GPL license v3 兼容的许可证创建开源应用程序，则可以在 GPLv3 条款下使用 fullPage。

You will have to provide a prominent notice that fullPage.js is in use. JavaScript 和 CSS 文件中的认可的意见应保持完整的许可证 (即使在合并或压缩后）

阅读更多关于 fullPage 的许可证。

用法

正如示例文件所示，需要引用：

可选，使用 css3:false 时，如果您想要使用库中包含的其他缓动效果的功能（ easeInOutCubic ），您可以添加 easings file。

使用 bower 或 npm 进行安装

或者，如果您愿意，可以使用 bower 或 npm 安装 fullPage.js：

终端：

// 使用 bower
bower install fullpage.js

// 使用 npm
npm install fullpage.js

包含文件：

<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- 以下行是可选的。 只有在使用选项 css3:false ，并且您希望使用其他缓动效果，而非 linear 、 swing 或 easeInOutCubic 时才有必要。 -->
<script src="vendors/easings.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

Using Webpack, Browserify or Require.js? Check how to use fullPage.js with module loaders .

可选用 CDN ：

如果您倾向使用 CDN 载入所需文件，fullPage.js 在 CDNJS： https://cdnjs.com/libraries/fullPage.js

要求 HTML 结构

HTML 文件中的首行 HTML 代码必须使用 HTML DOCTYPE 声明，否则可能会遇到代码段高度问题。HTML 5 doctype 中的示例： <!DOCTYPE html>.

每个代码段定义为包含 section 类的元素。 默认情况下，第一个 section 代码段，将被视为主页。 代码段应进行封装（即 <div id="fullpage"> ）。 封装不能是 body 元素。

<div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

如果你想定义一个与众不同的起始页面，而不是原始第一段或第一个滑动页，只需将 active 类添加到你想首先载入的段或滑动页。

<div class="section active">Some section</div>

为在代码段中创建横向滑块，每个滑动页将默认定义为包含 slide 类的元素：

<div class="section">
	<div class="slide"> slide 1 </div>
	<div class="slide"> slide 2 </div>
	<div class="slide"> slide 3 </div>
	<div class="slide"> slide 4 </div>
</div>

可以在 simple.html 文件 看到完整的 HTML 结构的例子

初始化

用 Vanilla Javascript 初始化

您只需要在关闭 </body> 标签之前调用 fullPage.js。

new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
	scrollHorizontally: true
});

使用 jQuery 进行初始化

如果您需要，您也可以将 fullpage.js 作为 jQuery 插件使用！

$(document).ready(function() {
	$('#fullpage').fullpage({
		//options here
		autoScrolling:true,
		scrollHorizontally: true
	});

	//methods
	$.fn.fullpage.setAllowScrolling(false);
});

函数和方法仍然可以用 jQuery 方式调用，如在 fullPage.js v2.X 中一样。

带有所有功能选项的 Vanilla JS 演示

所有选项的更复杂的初始化如下所示：

var myFullpage = new fullpage('#fullpage', {
	// 导航
	menu: '#menu',
	lockAnchors: false,
	anchors:['firstPage', 'secondPage'],
	navigation: false,
	navigationPosition: 'right',
	navigationTooltips: ['firstSlide', 'secondSlide'],
	showActiveTooltip: false,
	slidesNavigation: false,
	slidesNavPosition: 'bottom',

	// 滚动
	css3: true,
	scrollingSpeed: 700,
	autoScrolling: true,
	fitToSection: true,
	fitToSectionDelay: 600,
	scrollBar: false,
	easing: 'easeInOutCubic',
	easingcss3: 'ease',
	loopBottom: false,
	loopTop: false,
	loopHorizontal: true,
	continuousVertical: false,
	continuousHorizontal: false,
	scrollHorizontally: false,
	interlockedSlides: false,
	dragAndMove: false,
	offsetSections: false,
	resetSliders: false,
	fadingEffect: false,
	normalScrollElements: '#element1, .element2',
	scrollOverflow: true,
	scrollOverflowMacStyle: false,
	scrollOverflowReset: false,
	touchSensitivity: 15,
	bigSectionsDestination: null,

	// 可访问
	keyboardScrolling: true,
	animateAnchor: true,
	recordHistory: true,

	// 布局
	controlArrows: true,
	controlArrowsHTML: [
		'<div class="fp-arrow"></div>', 
		'<div class="fp-arrow"></div>'
	],
	verticalCentered: true,
	sectionsColor : ['#ccc', '#fff'],
	paddingTop: '3em',
	paddingBottom: '10px',
	fixedElements: '#header, .footer',
	responsiveWidth: 0,
	responsiveHeight: 0,
	responsiveSlides: false,
	parallax: false,
	parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
	dropEffect: false,
	dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
	waterEffect: false,
	waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
	cards: false,
	cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},


	// 自定义选择器
	sectionSelector: '.section',
	slideSelector: '.slide',

	lazyLoading: true,
	observer: true,
	credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},

	// 事件
	beforeLeave: function(origin, destination, direction, trigger){},
	onLeave: function(origin, destination, direction, trigger){},
	afterLoad: function(origin, destination, direction, trigger){},
	afterRender: function(){},
	afterResize: function(width, height){},
	afterReBuild: function(){},
	afterResponsive: function(isResponsive){},
	afterSlideLoad: function(section, origin, destination, direction, trigger){},
	onSlideLeave: function(section, origin, destination, direction, trigger){},
	onScrollOverflow: function(section, slide, position, direction){}
});

创建链接到 section 或 slide

如果你在 section 中使用 fullPage.js 和锚链接（在每个 section 使用 anchors 选项或属性 data-anchor ），那么你将能够在一个 section 里使用锚链接直接导航到某个 slide。

这是一个锚链接的例子： https://alvarotrigo.com/fullPage/#secondPage/2 （在你手动访问该 section/slide 就会看到的 URL ） 请注意，URL 的最后部分以 ＃secondPage / 2 结尾。

以下初始化：

new fullpage('#fullpage', {
	anchors:['firstPage', 'secondPage', 'thirdPage']
});

URL #secondPage/2 结尾处的锚分别定义了目标 section 和 slide 。 在前面的 URL 中，目标 section 将是使用锚点 secondPage 定义的 section ，slide 将会是第 2 张 slide ，因为我们使用索引 2 。 （一个 section 的第一个 slide 有索引 0 ，在技术上这是一个 section ）。

如果我们在HTML标记中使用属性 data-anchor ，就可以使用自定义锚点来代替它的索引：

<div class="section">
	<div class="slide" data-anchor="slide1"> slide 1 </div>
	<div class="slide" data-anchor="slide2"> slide 2 </div>
	<div class="slide" data-anchor="slide3"> slide 3 </div>
	<div class="slide" data-anchor="slide4"> slide 4 </div>
</div>

在最后一种情况中，我们使用的URL将是 #secondPage/slide3 ，这相当于之前的 #secondPage/2 。

请注意，如果没有提供 anchors 数组，则也可以使用 data-anchor 属性以同样的方式定义节锚点。

注意！data-anchor 标记的值不能与站点上的任何 ID 元素（或 IE 的 NAME 元素）相同。

创建更小或更大的 section

演示 fullPage.js 提供了一种方法来删除 section 和 slide 的全屏高度限制。 可以创建高度小于或大于视图的section 。 这是页脚的理想方式。 需明白所有 section 使用此功能并没有意义，这一点很重要。 如果网站的初始加载中有多个 section，则fullPage.js 将不会滚动以查看下一个 section ，因为它已经在视图中。

创建更小的 section ，只需在要应用的 section 中使用 fp-auto-height 类即可，则可以调用您的 section/slide 中定义的高度。

<div class="section">整个视图</div>
<div class="section fp-auto-height">自动高度</div>

section 响应自动高度

演示 响应自动高度可以通过使用 fp-auto-height-responsive 类来调用。 这种方式 section 将全屏，直到响应模式终止。 根据定义调整大小，可能是大于或小于视口。

由 fullpage.js 添加的状态类

Fullpage.js 在不同的元素中添加多个类型来保存网站状态的记录：

懒加载

演示 fullPage.js 提供了一种延迟加载图像、视频和音频元素的方式，这样它们不会减缓网站的加载速度，也不会浪费数据传输。 当使用懒加载时，所有这些元素只有在进入视口时才会加载。 要启用懒加载，您只需将 src 属性更改为 data-src ，如下所示：

<img data-src="image.png">
<video>
	<source data-src="video.webm" type="video/webm" />
	<source data-src="video.mp4" type="video/mp4" />
</video>

如果您已经使用另一个使用 data-src 的延懒载解决方案，则可以通过设置 lazyLoading: false 选项来禁用fullPage.js 懒加载。

自动播放/暂停嵌入式媒体

演示 注意：根据操作系统和浏览器的不同，自动播放功能可能无法在某些移动设备上使用（即 IOS 的 Safari 版本 < 10.0）。

在 section/slide 载入：

对于视频或音频使用属性 autoplay，或者对于 youtube iframe 使用参数 autoplay=1 将使得在加载页面时播放媒体元素。 在 section/slide 载入使用而不是属性 data-autoplay 播放。 例如：

<audio data-autoplay>
	<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

失焦暂停

嵌入式 HTML5 <video> / <audio> 和 Youtube iframe 在离开某个 section 或 slide 时自动暂停。 可以通过使用属性 data-keepplaying 来禁用。 例如：

<audio data-keepplaying>
	<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

使用扩展

fullpage.js 提供了一组扩展 您可以使用它来增强其默认功能。 所有这些都被列为 fullpage.js 选项.

扩展需要使用在 dist 文件夹 中的压缩文件 fullpage.extensions.min.js，而不是一贯的使用 fullPage.js 文件 (fullpage.js 或 fullpage.min.js)。

一旦你需要扩展文件，你需要在 fullPage 之前添加它。 例如，如果我想要使用 Continuos Horizontal 扩展，我将包含扩展文件，然后包含 fullPage 文件的扩展版本。

<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>

每个扩展都需要激活密钥和许可证密钥。在这里看到更多细节.

然后你就可以按照 选项 的说明使用和配置它们。

参数

-licenseKey：（默认 null ）。 此选项是强制性的。如果您在非开源项目中使用 fullPage ，则应使用购买fullPage 商业许可证时提供的许可证密钥。 如果您的项目是开放的，请[与我 联系 并提供指向您的存储库的链接以获取许可证密钥。 请阅读更多关于许可 这里 和 在网页上 。例如：

```javascript
new fullpage('#fullpage', {
	licenseKey: 'YOUR_KEY_HERE'
});
```

公共方法

你可以在这里看到它们

getActiveSection()

示例 获取包含激活 section 及其属性的对象（键入[ Section ](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#callbacks））。

fullpage_api.getActiveSection();

getActiveSlide()

示例 获取包含激活滑块及其属性的对象（键入[ Slide ](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#callbacks））。）。

fullpage_api.getActiveSlide();

getScrollY() & getScrollX

Demo getScrollY Gets the Y position of the fullPage wrapper. getScrollX gets the X position of the active horizontal slide.

fullpage_api.getScrollY();
fullpage_api.getScrollX();

moveSectionUp()

示例 向上滚动一个 section：

fullpage_api.moveSectionUp();

moveSectionDown()

示例 向下滚动一个 section：

fullpage_api.moveSectionDown();

moveTo(section, slide)

示例 将页面滚动到目标 section 和滑动。section 从 1 开始，slide 从 0 开始。

/*滚动到锚链接`firstSlide`和为2的slide */
fullpage_api.moveTo('firstSlide', 2);


//滚动到网站的第三个section
fullpage_api.moveTo(3, 0);

//这是一样的
fullpage_api.moveTo(3);

silentMoveTo(section, slide)

示例 与 moveTo 完全相同，但是在这种情况下，它将执行没有动画的滚动。 直接跳到目的地。

/*滚动到锚链接 firstSlide 和第二个 slide 的部分 */
fullpage_api.silentMoveTo('firstSlide', 2);

moveSlideRight()

示例 将当前 slide 的水平滑块滚动到下一张 slide ：

fullpage_api.moveSlideRight();

moveSlideLeft()

示例 将当前 slide 的水平滑块滚动到上一张 slide :

fullpage_api.moveSlideLeft();

setAutoScrolling(boolean)

示例 动态设置 autoScrolling 。 定义页面滚动行为的方式。 如果设置为 true，则将使用”自动”滚动，否则将使用站点的”手动”或”正常”滚动。

fullpage_api.setAutoScrolling(false);

setFitToSection(boolean)

示例 设置选项 fitToSection 的值，确定是否自适应 section 在屏幕上。

fullpage_api.setFitToSection(false);

fitToSection()

示例 滚动到最接近视图中的激活 section。

fullpage_api.fitToSection();

setLockAnchors(boolean)

示例 设置选项 lockAnchors 的值，以确定锚是否在 URL 中有影响。

fullpage_api.setLockAnchors(false);

setAllowScrolling(boolean, [directions])

示例 添加或者禁止 fullpage 自动绑定的鼠标滑轮和移动触摸事件。 注意这不会禁用键盘滚动。 您将需要使用setKeyboardScrolling 。


//禁用滚动
fullpage_api.setAllowScrolling(false);

//禁用向下滚动
fullpage_api.setAllowScrolling(false, 'down');

//禁用向下和向右滚动
fullpage_api.setAllowScrolling(false, 'down, right');

setKeyboardScrolling(boolean, [directions])

示例 添加或者禁止键盘对 section/slide 的控制（默认绑定）。

//禁用所有键盘滚动
fullpage_api.setKeyboardScrolling(false);

//禁用键盘向下滚动
fullpage_api.setKeyboardScrolling(false, 'down');

//禁用键盘向下和向右滚动
fullpage_api.setKeyboardScrolling(false, 'down, right');

setRecordHistory(boolean)

示例 定义是否为每个URL的变更纪录到浏览器中的历史记录中。

fullpage_api.setRecordHistory(false);

setScrollingSpeed(milliseconds)

示例 定义以毫秒为单位的滚动速度。

fullpage_api.setScrollingSpeed(700);

destroy(type)

示例 销毁插件事件以及可选的 HTML 标记和样式。理想选择配合使用 AJAX 加载内容时。

//销毁由fullPage.js创建的所有Javascript事件（滚动,以变动的URL...）
fullpage_api.destroy();

//销毁所有的JavaScript事件，以及在原始HTML标记中由fullPage.js所做的任何修改。
fullpage_api.destroy('all');

reBuild()

更新 DOM 结构以适应新的窗口大小或其内容。 非常适合与 AJAX 调用或站点的 DOM 结构中的外部更改结合使用，特别是在使用 scrollOverflow：true 时。

fullpage_api.reBuild();

setResponsive(boolean)

示例 设置页面的响应模式。 当设置为 true 时，自动滚动将被关闭，结果与 responsiveWidth 或responsiveHeight 选项被触发时的结果完全相同。

fullpage_api.setResponsive(true);

responsiveSlides.toSections()

fullpage.js 的扩展。 需要 fullpage.js> = 3.0.1。将水平 slide 变成垂直 section。

fullpage_api.responsiveSlides.toSections();

responsiveSlides.toSlides()

fullpage.js的扩展。 需要 fullpage.js> = 3.0.1 。将原始 slide（现转换为垂直 section）重新转换为水平 slide。

fullpage_api.responsiveSlides.toSlides();

回调函数

示例 你可以在 这里 看到他们。

一些回调，例如 onLeave 将包含 Section 或 Slide 类型的参数。 这些对象将包含以下属性：

afterLoad (origin, destination, direction ,trigger)

滚动结束之后，一旦加载了 section ，就会触发回调。参数：

例如：

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

	afterLoad: function(origin, destination, direction, trigger){
		var origin = this;

		//使用 index
		if(origin.index == 2){
			alert("第3个section停止加载");
		}

		//使用 anchorLink
		if(origin.anchor == 'secondSlide'){
			alert("第2个section停止加载");
		}
	}
});

onLeave (origin, destination, direction, trigger)

一旦用户离开 section ，过渡到新 section ，就会触发此回调。 返回 “false” 将在移动发生之前取消移动。

参数：

例如：

new fullpage('#fullpage', {
	onLeave: function(origin, destination, direction, trigger){
		var origin = this;

		//离开第二个section后
		if(origin.index == 1 && direction =='down'){
			alert("前往第3个section！");
		}

		else if(origin.index == 1 && direction == 'up'){
			alert("前往第1个section！");
		}
	}
});

beforeLeave (origin, destination, direction, trigger)

Demo This callback is fired right before leaving the section, just before the transition takes place.

You can use this callback to prevent and cancel the scroll before it takes place by returning false.

Parameters:

Example:


var cont = 0;
new fullpage('#fullpage', {
	beforeLeave: function(origin, destination, direction, trigger){

		// prevents scroll until we scroll 4 times
		cont++;
		return cont === 4;
	}
});

afterRender()

Demo 这个回调在页面结构生成后立即被触发。 这是您要用来初始化其他插件的回调函数，或者触发任何需要 DOM 准备就绪的代码（因为这个插件修改了 DOM 来创建最终的结构）。 请参阅 常见问题 了解更多信息。

例如：

new fullpage('#fullpage', {
	afterRender: function(){
		var pluginContainer = this;
		alert("DOM结构已完成");
	}
});

afterResize(width, height)

Demo 调整浏览器窗口大小后，会触发此回调。 就在 section 被调整之后。

参数：

例如：

new fullpage('#fullpage', {
	afterResize: function(width, height){
		var pluginContainer = this;
		alert("section已重新调整大小");
	}
});

afterReBuild()

Demo 通过调用 fullpage_api.reBuild（） 手动重新构建 fullpage.js 后，将触发此回调。

例如：

new fullpage('#fullpage', {
	afterReBuild: function(){
		console.log("fullPage.js has manually being re-builded");
	}
});

afterResponsive(isResponsive)

Demo 在 fullpage.js 从正常模式变为响应模式或从响应模式变为正常模式之后，此回调将被触发。

参数：

例如：

new fullpage('#fullpage', {
	afterResponsive: function(isResponsive){
		alert("是否响应" + isResponsive);
	}
});

afterSlideLoad (section, origin, destination, direction, trigger)

Demo 滚动结束后，加载一个 section 的 slide 后触发回调。

参数：

例如：

new fullpage('#fullpage', {
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

	afterSlideLoad: function( section, origin, destination, direction, trigger){
		var loadedSlide = this;

		//第二个section的第一个slide
		if(section.anchor == 'secondPage' && destination.index == 1){
			alert("第一张slide加载完毕");
		}

		//第二个section的第二个slide（假设#secondSlide是
        //为第二个slide锚点
		if(section.index == 1 && destination.anchor == 'secondSlide'){
			alert("第二slide加载完毕");
		}
	}
});

onSlideLeave (section, origin, destination, direction, trigger)

Demo 一旦用户离开 slide 转到另一个 slide ，就会触发此回调。返回 false 将在移动发生之前取消移动。

参数：

例如：

new fullpage('#fullpage', {
	onSlideLeave: function( section, origin, destination, direction, trigger){
		var leavingSlide = this;

		//留下第二个section的第一个slide
		if(section.index == 1 && origin.index == 0 && direction == 'right'){
			alert("离开第一个slide！");
		}

		//将第二个section的第三个slide留在左边
		if(section.index == 1 && origin.index == 2 && direction == 'left'){
			alert("前往第二个slide！");
		}
	}
});

在发生移动之前取消移动

Demo 您可以通过在 onSlideLeave 回调中返回 false 来取消移动。 与使用 onLeave 取消动作一样。

onScrollOverflow (section, slide, position, direction)

Demo This callback gets fired when a scrolling inside a scrollable section when using the fullPage.js option scrollOverflow: true.

Parameters:

Example:

new fullpage('#fullpage', {
	onScrollOverflow: function( section, slide, position, direction){
		console.log(section);
		console.log("position: " + position);
	}
});

问题反馈

  1. 请在提问之前使用 issue 搜索查找您的问题。
  2. 确保使用最新的 fullpage.js 版本，不支持旧版本。
  3. 使用 Github 问题论坛 来创建问题。
  4. 对问题进行复现 如果可以，请使用 jsfiddle 或 codepen 。

贡献到 fullpage.js

请参阅 贡献到 fullpage.js

更新日志

要查看最近更改的列表，请参见 发行版部分 .

编译构建

想要构建 fullpage.js 分发文件？ 请参阅 Build Tasks

参考资源

谁在使用 fullPage.js

Google Coca-cola eBay BBC Sony

Vodafone British Airways McDonalds EA Vogue Mi

Mercedes sym Bugatti eDarling Ubisoft

赞助

非常欢迎您的捐款:)

Patreon page

Donate

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor] | [Become a patreon]

Codeless Stackpath Browserstack CodePen

People