You can also prevent scrolloverflow from getting applied on responsive mode when using fp-auto-height-responsive in the section element.

$3

(default false) Extension of fullpage.js. Possible values are true, false, sections, slides. When set to true it scrolls up the content of the section/slide with a scroll bar when leaving to another section/slide. This way the section/slide will always show the start of its content even when scrolling from a section underneath it. Adding the class fp-no-scrollOverflowReset on the section or slide will disable this feature for that specific panel.

$3

(default false) When active, this option will use a "mac style" for the scrollbar instead of the default one, which will look quite different in Windows computers.

$3

(default .section) Defines the Javascript selector used for the plugin sections. It might need to be changed sometimes to avoid problem with other plugins using the same selectors as fullpage.js.

$3

(default .slide) Defines the Javascript selector used for the plugin slides. It might need to be changed sometimes to avoid problem with other plugins using the same selectors as fullpage.js.

$3

(default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

$3

(default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

$3

(default false) Extension of fullpage.js. When set to true slides will be turned into vertical sections when responsive mode is fired. (by using the responsiveWidth or responsiveHeight options detailed above). Requires fullpage.js >= 3.0.1.

$3

(default false) Extension of fullpage.js. Enables or disables the slider effects on sections. Requires fullpage.js >= 4.0.35

$3

(default: {Object} config for the "focus" preset).
Allows to configure the parameters for the effects when using the option effects:true. Read more about how to apply the effects option.

$3

(default false) Extension of fullpage.js. Defines whether or not to use the parallax backgrounds effects on sections / slides. Not compatible with fp-auto-height sections, offsetSerctions and dragAndMove.op Read more about how to apply the parallax option.

$3

(default: { type: 'reveal', percentage: 62, property: 'translate'}).

Allows to configure the parameters for the parallax backgrounds effect when using the option parallax:true. Read more about how to apply the parallax option.

$3

(default false) Extension of fullpage.js. Defines whether or not to use the drop effect on sections / slides. Read more about how to apply the drop effect option.

$3

(default: { speed: 2300, color: '#F82F4D', zIndex: 9999}).

Allows to configure the parameters for the drop effect when using the option dropEffect:true.Read more about how to apply the drop effect option.

$3

(default false) Extension of fullpage.js. Defines whether or not to use the water effect on sections / slides. Read more about how to apply the water effect option.

$3

(default: { animateContent: true, animateOnMouseMove: true}).

Allows to configure the parameters for the water effect when using the option waterEffect:true.Read more about how to apply the water effect option.

$3

(default false) Extension of fullpage.js. Defines whether or not to use the cards effect on sections/slides. Read more about how to apply the cards option.

$3

(default: { perspective: 100, fadeContent: true, fadeBackground: true}).

Allows you to configure the parameters for the cards effect when using the option cards:true. Read more about how to apply the cards option.

$3

(default true) Lazy loading is active by default which means it will lazy load any media element containing the attribute data-src as detailed in the Lazy Loading docs . If you want to use any other lazy loading library you can disable this fullpage.js feature.

$3

(default 0) Specifies the number of adjacent vertical sections and horizontal slides whose media elements should be lazy-loaded relative to the current one. Use a number to specify how many previous and next sections or slides should be preloaded.

$3

(default true) Defines whether or not to observe changes in the HTML structure of the page. When enabled, fullPage.js will automatically react to those changes and update itself accordingly. Ideal when adding, removing or hidding sections or slides.

$3

(default {enabled: true, label: 'Made with fullpage.js', position: 'right'}).
Defines whether to use fullPage.js credits. As per clause 0, 4, 5 and 7 of the GPLv3 licecense, those using fullPage. js under the GPLv3 are required to give prominent notice that fullPage.js is in use. We recommend including attribution by keeping this option enabled. Note: This option requires a valid value licenseKey value.

Methods

You can see them in action here

$3

Demo Gets an Object (type Section) containing the active section and its properties.

`javascript
fullpage_api.getActiveSection();
`

$3

Demo Gets an Object (type Slide) containing the active slide and its properties.

`javascript
fullpage_api.getActiveSlide();
`

$3

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

`javascript
fullpage_api.getScrollY();
fullpage_api.getScrollX();
`

$3

Demo Scrolls one section up:
`javascript
fullpage_api.moveSectionUp();
`
---

$3

Demo Scrolls one section down:
`javascript
fullpage_api.moveSectionDown();
`
---

$3

Demo Scrolls the page to the given section and slide. The first section will have the index 1 whilst the first slide, the visible one by default, will have index 0.
`javascript
/Scrolling to the section with the anchor link firstSlide and to the 2nd Slide /
fullpage_api.moveTo('firstSlide', 2);

`

`javascript
//Scrolling to the 3rd section (with index 3) in the site
fullpage_api.moveTo(3, 0);

//Which is the same as
fullpage_api.moveTo(3);
`
---

$3

Demo
Exactly the same as moveTo but in this case it performs the scroll without animation. A direct jump to the destination.
`javascript
/Scrolling to the section with the anchor link firstSlide and to the 2nd Slide /
fullpage_api.silentMoveTo('firstSlide', 2);
`
---

$3

Demo
Scrolls the horizontal slider of the current section to the next slide:
`javascript
fullpage_api.moveSlideRight();
`
---

$3

Demo
Scrolls the horizontal slider of the current section to the previous slide:
`javascript
fullpage_api.moveSlideLeft();
`
---

$3

Demo Sets the scrolling configuration in real time.
Defines the way the page scrolling behaves. If it is set to true, it will use the "automatic" scrolling, otherwise, it will use the "manual" or "normal" scrolling of the site.

`javascript
fullpage_api.setAutoScrolling(false);
`
---

$3

Demo
Sets the value for the option fitToSection determining whether to fit the section in the screen or not.

`javascript
fullpage_api.setFitToSection(false);
`
---

$3

Demo
Scrolls to the nearest active section fitting it in the viewport.

`javascript
fullpage_api.fitToSection();
`
---

$3

Demo
Sets the value for the option lockAnchors determining whether anchors will have any effect in the URL or not.

`javascript
fullpage_api.setLockAnchors(false);
`
---

$3

Demo Adds or remove the possibility of scrolling through sections/slides by using the mouse wheel/trackpad or touch gestures (which is active by default). Note this won't disable the keyboard scrolling. You
would need to use setKeyboardScrolling for it.

- directions: (optional parameter) Admitted values: all, up, down, left, right or a combination of them separated by commas like down, right. It defines the direction for which the scrolling will be enabled or disabled.

`javascript

//disabling scrolling
fullpage_api.setAllowScrolling(false);

//disabling scrolling down
fullpage_api.setAllowScrolling(false, 'down');

//disabling scrolling down and right
fullpage_api.setAllowScrolling(false, 'down, right');
`
---

$3

Demo Adds or remove the possibility of scrolling through sections by using the keyboard (which is active by default).

- directions: (optional parameter) Admitted values: all, up, down, left, right or a combination of them separated by commas like down, right. It defines the direction for which the scrolling will be enabled or disabled.

`javascript
//disabling all keyboard scrolling
fullpage_api.setKeyboardScrolling(false);

//disabling keyboard scrolling down
fullpage_api.setKeyboardScrolling(false, 'down');

//disabling keyboard scrolling down and right
fullpage_api.setKeyboardScrolling(false, 'down, right');
`
---

$3

Demo Defines whether to record the history for each hash change in the URL.

`javascript
fullpage_api.setRecordHistory(false);
`
---

$3

Demo Defines the scrolling speed in milliseconds.

`javascript
fullpage_api.setScrollingSpeed(700);
`
---

$3

Demo Destroys the plugin events and optionally its HTML markup and styles.
Ideal to use when using AJAX to load content.

- type: (optional parameter) can be empty or all. If all is passed, the HTML markup and styles used by fullpage.js will be removed. This way the original HTML markup, the one used before any plugin modification is made, will be maintained.

`javascript
//destroying all Javascript events created by fullPage.js (scrolls, hashchange in the URL...)
fullpage_api.destroy();

//destroying all Javascript events and any modification done by fullPage.js over your original HTML markup.
fullpage_api.destroy('all');
`
---

$3

Updates the DOM structure to fit the new window size or its contents.
Ideal to use in combination with AJAX calls or external changes in the DOM structure of the site, specially when using scrollOverflow:true.

`javascript
fullpage_api.reBuild();
`
---

$3

Demo Sets the responsive mode of the page. When set to true the autoScrolling will be turned off and the result will be exactly the same one as when the responsiveWidth or responsiveHeight options get fired.
`javascript
fullpage_api.setResponsive(true);
`
---

$3

Extension of fullpage.js. Requires fullpage.js >= 3.0.1.
Turns horizontal slides into vertical sections.

`javascript
fullpage_api.responsiveSlides.toSections();
`
---

$3

Extension of fullpage.js. Requires fullpage.js >= 3.0.1.
Turns back the original slides (now converted into vertical sections) into horizontal slides again.

`javascript
fullpage_api.responsiveSlides.toSlides();
`

Callbacks

Demo You can see them in action here.

Some callbacks, such as onLeave will contain Object type of parameters containing the following properties:

- anchor: (String) item's anchor.
- index: (Number) item's index.
- item: (DOM element) item element.
- isFirst: (Boolean) determines if the item is the first child.
- isLast: (Boolean) determines if the item is the last child.

$3

Demo Callback fired once the sections have been loaded, after the scrolling has ended.
Parameters:

- origin: (Object) section of origin.
- destination: (Object) destination section.
- direction: (String) it will take the values up or down depending on the scrolling direction.
- trigger: (String) indicates what triggered the scroll. It can be: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".

Example:

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

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

//using index
if(origin.index == 2){
alert("Section 3 ended loading");
}

//using anchorLink
if(origin.anchor == 'secondSlide'){
alert("Section 2 ended loading");
}
}
});
`

---

$3

Demo This callback is fired once the user leaves a section, in the transition to the new section.
Returning false will cancel the move before it takes place.

Parameters:

- origin: (Object) section of origin.
- destination: (Object) destination section.
- direction: (String) it will take the values up or down depending on the scrolling direction.
- trigger: (String) indicates what triggered the scroll. It can be: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".

Example:

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

//after leaving section 2
if(origin.index == 1 && direction =='down'){
alert("Going to section 3!");
}

else if(origin.index == 1 && direction == 'up'){
alert("Going to section 1!");
}
}
});
`


---

$3

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:

- origin: (Object) section of origin.
- destination: (Object) destination section.
- direction: (String) it will take the values up or down depending on the scrolling direction.
- trigger: (String) indicates what triggered the scroll. It can be: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".

Example:

`javascript

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

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

---

$3

Demo This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure). See FAQs for more info.

Example:

`javascript
new fullpage('#fullpage', {
afterRender: function(){
var pluginContainer = this;
alert("The resulting DOM structure is ready");
}
});
`
---

$3

Demo This callback is fired after resizing the browser's window. Just after the sections are resized.

Parameters:

- width: (Number) window's width.
- height: (Number) window's height.

Example:

`javascript
new fullpage('#fullpage', {
afterResize: function(width, height){
var fullpageContainer = this;
alert("The sections have finished resizing");
}
});
`
---

$3

Demo This callback is fired after manually re-building fullpage.js by calling fullpage_api.reBuild().

Example:

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

$3

Demo This callback is fired after fullpage.js changes from normal to responsive mode or from responsive mode to normal mode.

Parameters:

- isResponsive: (Boolean) determines if it enters into responsive mode (true) or goes back to normal mode (false).

Example:

`javascript
new fullpage('#fullpage', {
afterResponsive: function(isResponsive){
alert("Is responsive: " + isResponsive);
}
});
`
---

$3

Demo Callback fired once the slide of a section have been loaded, after the scrolling has ended.

Parameters:

- section: (Object) active vertical section.
- origin: (Object) horizontal slide of origin.
- destination: (Object) destination horizontal slide.
- direction: (String) right or left depending on the scrolling direction.
- trigger: (String) indicates what triggered the scroll. It can be: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".

Example:

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

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

//first slide of the second section
if(section.anchor == 'secondPage' && destination.index == 1){
alert("First slide loaded");
}

//second slide of the second section (supposing #secondSlide is the
//anchor for the second slide)
if(section.index == 1 && destination.anchor == 'secondSlide'){
alert("Second slide loaded");
}
}
});
`


---

$3

Demo This callback is fired once the user leaves an slide to go to another, in the transition to the new slide.
Returning false will cancel the move before it takes place.

Parameters:

- section: (Object) active vertical section.
- origin: (Object) horizontal slide of origin.
- destination: (Object) destination horizontal slide.
- direction: (String) right or left depending on the scrolling direction.
- trigger: (String) indicates what triggered the scroll. It can be: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".

Example:

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

//leaving the first slide of the 2nd Section to the right
if(section.index == 1 && origin.index == 0 && direction == 'right'){
alert("Leaving the fist slide!!");
}

//leaving the 3rd slide of the 2nd Section to the left
if(section.index == 1 && origin.index == 2 && direction == 'left'){
alert("Going to slide 2! ");
}
}
});
`

#### Cancelling a move before it takes place
You can cancel a move by returning false on the onSlideLeave callback. Same as when canceling a movement with onLeave.


---

$3

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

Parameters:

- section: (Object) active vertical section.
- slide: (Object) horizontal slide of origin.
- position: (Integer) scrolled amount within the section/slide. Starts on 0.
- direction: (String) up or down

Example:

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

Reporting issues

1. Please, look for your issue before asking using the github issues search.
2. Make sure you use the latest fullpage.js version. No support is provided for older versions.
3. Use the the Github Issues forum to create issues.
4. An isolated reproduction of the issue will be required. Make use of jsfiddle or codepen for it if possible.

Contributing to fullpage.js

Please see Contributing to fullpage.js

Changelog

To see the list of recent changes, see Releases section.

Build tasks

Want to build fullpage.js distribution files? Please see Build Tasks

Resources

- Wordpress Plugin for Gutenberg and for Elementor.
- Wordpress theme
- Official Vue.js wrapper component
- Official React.js wrapper component
- Official Angular wrapper component
- CSS Easing Animation Tool - Matthew Lein (useful to define the easingcss3` value)
- fullPage.js jsDelivr CDN
- fullPage.js plugin for October CMS
- fullPage.js Angular2 directive
- fullPage.js angular directive
- fullPage.js ember-cli addon
- fullPage.js Rails Ruby Gem
- Angular fullPage.js - Adaptation for Angular.js v1.x
- Integrating fullPage.js with Wordpress (Tutorial)
- Wordpress Plugin for Divi
- Wordpress Plugin for Elementor

Who is using fullPage.js

!Who is using fullPage.js

- http://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02
- http://medoff.ua/en/
- http://promo.prestigio.com/grace1/
- http://torchbrowser.com/
- http://www.boxreload.com/
- http://boxx.hk/
- http://www.villareginateodolinda.it

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Contact Us] | [[Become a Patreon]](https://www.patreon.com/fullpagejs) | Become a GitHub Sponsor


$3

Contributors