jQuery Plugins › jQuery Layout Plugins › fullPage.js

Create Fullscreen One Page Scrolling Websites With fullPage.js

File Size:	8.62 MB
Views Total:	121019
Last Update:	03/06/2026 01:16:00 UTC
Publish Date:	10/01/2013 07:51:04 UTC
Official Website:	Go to website
License:	MIT

Demo Download

Features

Full-screen section snapping: Each section occupies 100% of the viewport height. The library handles all scroll-to-section transitions automatically.
Horizontal slide panels: Any section can contain multiple horizontal slides, complete with control arrows and a slide navigation bar.
Touch and swipe support: Built-in touch gesture detection covers mobile phones, tablets, and touch-enabled desktops.
Keyboard navigation: Arrow keys move between sections and slides by default. This can be locked or restricted per direction at runtime.
Anchor-based URL routing: Each section maps to a URL hash anchor, so users can bookmark or share a direct link to any part of the page.
Lazy loading: Images, videos, and audio elements load only when their section enters the viewport.
Auto play/pause for media: Embedded HTML5 video, audio, and YouTube iframes pause automatically on section leave and resume on return.
Responsive fallback: Below a configurable width or height threshold, the library switches to standard page scrolling and adds a fp-responsive class to the body.
Scroll overflow handling: Sections with content taller than the viewport get an internal scrollbar. No content is clipped.
Framework wrappers: Official wrappers exist for jQuery, Vue, React, and Angular.

Use Cases:

Product landing pages: Showcase features one by one with full-screen backgrounds and call-to-action slides.
Portfolio websites: Display projects as separate sections with horizontal galleries inside each.
Storytelling and narrative sites: Guide users through a linear story with visual transitions between chapters.
App feature walkthroughs: Introduce functionality step by step, with embedded video demos that auto-play on section entry.

Installation:

# NPM
$ npm install fullpage.js

How to use it:

1. Import the fullPage.js library's JavaScript and stylesheet in your document.

<!-- Styles -->
<link rel="stylesheet" href="/dist/fullpage.min.css" />

<!-- Library -->
<script src="/dist/fullpage.min.js"></script>

<!-- Or load files from a CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.css" />
<script src="https://cdn.jsdelivr.net/npm/fullpage.js/dist/fullpage.min.js"></script>

2. Create the html for your one page scrolling website. The HTML must start with a <!DOCTYPE html> declaration. Section height calculations depend on it.

<!-- fullPage.js wrapper — must not be <body> -->
<div id="site">

  <!-- Each .section becomes a full-screen panel -->
  <div class="section" data-anchor="home">
    <h1>Welcome</h1>
  </div>

  <div class="section" data-anchor="about">
    <h2>About Us</h2>
  </div>

  <!-- A section with horizontal slides -->
  <div class="section" data-anchor="work">
    <div class="slide">Project Alpha</div>
    <div class="slide">Project Beta</div>
    <div class="slide">Project Gamma</div>
  </div>

  <div class="section" data-anchor="contact">
    <h2>Get in Touch</h2>
  </div>

</div>

The data-anchor attribute sets the URL hash for each section (e.g., #about). You can also pass anchors through the JavaScript options if you prefer to keep the HTML clean.

3. Initialize fullPage.js and pass options as follows:

new fullpage('#site', {

  // Anchor links per section (matches data-anchor order)
  anchors: ['home', 'about', 'work', 'contact'],

  // Enable smooth auto-scroll snapping
  autoScrolling: true,

  // Show dot navigation on the right side
  navigation: true,
  navigationPosition: 'right',
  navigationTooltips: ['Home', 'About', 'Work', 'Contact'],

  // Background colors per section
  sectionsColor: ['#1a1a2e', '#16213e', '#0f3460', '#533483'],

  // Horizontal slides loop back to start after the last slide
  loopHorizontal: true,
  
});

// Initialize as a jQuery plugin
$(document).ready(function () {
  $('#site').fullpage({
    autoScrolling: true,
    navigation: true,
  });

  // Call methods via jQuery static API
  $.fn.fullpage.moveSectionDown();
});

4. To enable lazy load, change src to data-src on any image, video source, or audio source. fullPage.js swaps the attribute when the section enters the viewport.

<!-- Image loads only when its section becomes visible -->
<img data-src="/images/case-study-hero.jpg" alt="Case study hero" />

<!-- Video sources follow the same pattern -->
<video>
  <source data-src="/video/demo.webm" type="video/webm" />
  <source data-src="/video/demo.mp4"  type="video/mp4" />
</video>

5. Add data-autoplay to any media element to play it when its section loads. The library pauses it automatically on section leave.

<!-- Plays when section loads, pauses when user scrolls away -->
<video data-autoplay muted loop>
  <source data-src="/video/background-loop.mp4" type="video/mp4" />
</video>

<!-- Add data-keepplaying to skip the auto-pause behavior -->
<audio data-keepplaying>
  <source src="/audio/ambient-track.ogg" type="audio/ogg" />
</audio>

6. If your site has a fixed header, set paddingTop to match its height. This keeps content visible behind the header on every section.

new fullpage('#site', {
  autoScrolling: true,
  paddingTop: '70px', // Match your fixed header height
  paddingBottom: '0px',
  fixedElements: '#main-header, .sticky-footer', // These elements leave the scroll structure
});

7. Integrate the library with your navigation menu:

<!-- Place the menu OUTSIDE the fullpage wrapper -->
<nav id="top-nav">
  <ul>
    <li data-menuanchor="home" class="active"><a href="#home">Home</a></li>
    <li data-menuanchor="about"><a href="#about">About</a></li>
    <li data-menuanchor="work"><a href="#work">Work</a></li>
    <li data-menuanchor="contact"><a href="#contact">Contact</a></li>
  </ul>
</nav>

new fullpage('#site', {
  anchors: ['home', 'about', 'work', 'contact'],
  menu: '#top-nav', // fullPage.js adds .active to the matching nav item on scroll
});

8. A section does not have to be fullscreen. Add fp-auto-height to any section and it takes the height of its content.

<div class="section fp-auto-height">
  <!-- This section sizes to its content, ideal for a footer -->
  <footer>© 2025 Studio Name</footer>
</div>

9. All configuration options to customize the one page scrolling effect.

new fullpage('#site', {
  
  // ==========================================
  // LICENSE & CREDITS
  // ==========================================
  
  // Sets the commercial or open-source license key
  licenseKey: 'YOUR_KEY_HERE',
  
  // Defines whether to show the fullPage.js credits label
  credits: { enabled: true, label: 'Made with fullPage.js', position: 'right' },

  // ==========================================
  // NAVIGATION & MENU
  // ==========================================
  
  // Specifies the menu element to link with the sections
  menu: '#myMenu',
  
  // Defines the anchor links shown on the URL for each section
  anchors: ['home', 'about', 'work', 'contact'],
  
  // Determines whether anchors in the URL affect the scrolling behavior
  lockAnchors: false,
  
  // Defines whether the initial load scrolls with an animation to the anchor
  animateAnchor: true,
  
  // Defines whether to push the state of the site to the browser's history
  recordHistory: true,
  
  // Shows a vertical navigation bar made up of small circles
  navigation: true,
  
  // Defines the position of the vertical navigation bar ('left' or 'right')
  navigationPosition: 'right',
  
  // Defines the tooltips to show for the navigation circles
  navigationTooltips:['Home', 'About', 'Work', 'Contact'],
  
  // Shows a persistent tooltip for the actively viewed section
  showActiveTooltip: false,
  
  // Shows a navigation bar for each landscape slider
  slidesNavigation: false,
  
  // Defines the position for the landscape navigation bar ('top' or 'bottom')
  slidesNavPosition: 'bottom',

  // ==========================================
  // SCROLLING BEHAVIOR
  // ==========================================
  
  // Defines whether to use CSS3 transforms or JavaScript for scrolling
  css3: true,
  
  // Sets the speed in milliseconds for scrolling transitions
  scrollingSpeed: 700,
  
  // Defines whether to use automatic scrolling or normal browser scrolling
  autoScrolling: true,
  
  // Determines whether to fit sections to the viewport
  fitToSection: true,
  
  // Delays the fitting by the configured milliseconds
  fitToSectionDelay: 1000,
  
  // Determines whether to use a scroll bar for the vertical sections
  scrollBar: false,
  
  // Defines the transition effect for vertical and horizontal scrolling
  easing: 'easeInOutCubic',
  
  // Defines the transition effect when using CSS3 transforms
  easingcss3: 'ease',
  
  // Defines whether scrolling up in the first section scrolls to the last one
  loopTop: false,
  
  // Defines whether scrolling down in the last section scrolls to the first one
  loopBottom: false,
  
  // Defines whether horizontal sliders loop after reaching the last slide
  loopHorizontal: true,
  
  // Avoids auto-scroll when scrolling over specific elements (e.g., maps)
  normalScrollElements: '#map, .scrollable-div',
  
  // Creates a scrollbar for sections with content larger than the viewport height
  scrollOverflow: true,
  
  // Uses a Mac-style scrollbar on Windows computers
  scrollOverflowMacStyle: false,
  
  // Determines whether to skip the scroll animation between non-consecutive sections
  skipIntermediateItems: false,
  
  // Defines how to scroll to a section larger than the viewport ('top', 'bottom', null)
  bigSectionsDestination: null,

  // ==========================================
  // ACCESSIBILITY & INTERACTION
  // ==========================================
  
  // Defines if the content is navigable using the keyboard
  keyboardScrolling: true,
  
  // Defines the swipe distance percentage required to navigate on touch devices
  touchSensitivity: 5,

  // ==========================================
  // DESIGN & LAYOUT
  // ==========================================
  
  // Determines whether to use control arrows for the horizontal slides
  controlArrows: true,
  
  // Defines the HTML structure for the left and right control arrows
  controlArrowsHTML:[
    '<div class="fp-arrow"></div>', 
    '<div class="fp-arrow"></div>'
  ],
  
  // Centers the content vertically using flexbox
  verticalCentered: true,
  
  // Defines the CSS background color property for each section
  sectionsColor:['#1a1a2e', '#16213e', '#0f3460', '#533483'],
  
  // Defines the top padding for each section (useful for fixed headers)
  paddingTop: '0px',
  
  // Defines the bottom padding for each section (useful for fixed footers)
  paddingBottom: '0px',
  
  // Defines which elements are taken off the scrolling structure to remain fixed
  fixedElements: '#header, .footer',
  
  // Adjusts section height when the mobile navigation bar changes size
  adjustOnNavChange: true,
  
  // Switches to normal scrolling under the defined width in pixels
  responsiveWidth: 0,
  
  // Switches to normal scrolling under the defined height in pixels
  responsiveHeight: 0,

  // ==========================================
  // CUSTOM SELECTORS
  // ==========================================
  
  // Defines the JavaScript selector used for the plugin sections
  sectionSelector: '.section',
  
  // Defines the JavaScript selector used for the plugin slides
  slideSelector: '.slide',

  // ==========================================
  // MEDIA & OBSERVERS
  // ==========================================
  
  // Lazy loads media elements containing the data-src attribute
  lazyLoading: true,
  
  // Specifies the number of adjacent sections/slides to lazy-load
  lazyLoadThreshold: 0,
  
  // Observes changes in the HTML structure and updates the plugin automatically
  observer: true,

  // ==========================================
  // PREMIUM EXTENSIONS (Requires Extension Files)
  // ==========================================
  
  // Defines whether scrolling down in the last section scrolls to the first one continuously
  continuousVertical: false,
  
  // Defines whether sliding right in the last slide slides to the first one continuously
  continuousHorizontal: false,
  
  // Defines whether to slide horizontally using the mouse wheel
  scrollHorizontally: false,
  
  // Determines whether moving one slider forces other sliders to move
  interlockedSlides: false,
  
  // Enables dragging and flicking of sections using a mouse or touch
  dragAndMove: false,
  
  // Provides a way to use non-fullscreen sections based on percentage
  offsetSections: false,
  
  // Defines whether to reset every slider after leaving its section
  resetSliders: false,
  
  // Defines whether to use a fading effect instead of scrolling
  fadingEffect: false,
  
  // Scrolls up the content of a section when leaving it
  scrollOverflowReset: false,
  
  // Turns slides into vertical sections when responsive mode fires
  responsiveSlides: false,
  
  // Enables the cinematic slider effects on sections
  cinematic: false,
  
  // Configures the parameters for the cinematic animation
  cinematicOptions: { in: 'zoomIn', out: 'zoomOut' },
  
  // Enables the slider effects on sections
  effects: false,
  
  // Configures the parameters for the slider effects
  effectsOptions: { type: 'focus' },
  
  // Defines whether to use parallax background effects
  parallax: false,
  
  // Configures the parameters for the parallax effect
  parallaxOptions: { type: 'reveal', percentage: 62, property: 'translate' },
  
  // Defines whether to use the drop effect on sections
  dropEffect: false,
  
  // Configures the parameters for the drop effect
  dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999 },
  
  // Defines whether to use the water effect on sections
  waterEffect: false,
  
  // Configures the parameters for the water effect
  waterEffectOptions: { animateContent: true, animateOnMouseMove: true },
  
  // Defines whether to use the cards effect on sections
  cards: false,
  
  // Configures the parameters for the cards effect
  cardsOptions: { perspective: 100, fadeContent: true, fadeBackground: true }

});

10. Callback functions.

new fullpage('#site', {
  licenseKey: 'YOUR_LICENSE_KEY',

  // Fires just before a section transition starts.
  // Return false to block the scroll from happening.
  beforeLeave: function (origin, destination, direction, trigger) {
    // origin and destination are Section objects: { anchor, index, item, isFirst, isLast }
    // direction: 'up' or 'down'
    // trigger: 'wheel', 'keydown', 'menu', 'slideArrow', 'verticalNav', 'horizontalNav'
    if (destination.index === 3 && !userIsAuthenticated) {
      return false; // Block navigation to the 4th section
    }
  },

  // Fires as the user leaves a section, during the transition.
  // Return false here as well to cancel the move.
  onLeave: function (origin, destination, direction, trigger) {
    console.log('Leaving section ' + origin.anchor + ' going ' + direction);
  },

  // Fires after a section has fully loaded and the scroll animation has ended.
  afterLoad: function (origin, destination, direction, trigger) {
    if (destination.anchor === 'work') {
      initPortfolioAnimations(); // Safe to run animations after the section is visible
    }
  },

  // Fires once after fullPage.js has built the DOM structure.
  // This is the correct place to initialize third-party plugins.
  afterRender: function () {
    initLightbox(); // Initialize after fullPage.js restructures the DOM
  },

  // Fires after the browser window is resized and sections have recalculated their dimensions.
  afterResize: function (width, height) {
    console.log('Viewport is now ' + width + 'x' + height);
  },

  // Fires after fullpage_api.reBuild() completes.
  afterReBuild: function () {
    console.log('fullPage.js structure has been rebuilt');
  },

  // Fires when the library enters or exits responsive mode.
  afterResponsive: function (isResponsive) {
    console.log('Responsive mode active: ' + isResponsive);
  },

  // Fires after a horizontal slide has fully loaded.
  // section: active vertical Section object
  // origin: the slide scrolled from
  // destination: the slide scrolled to
  // direction: 'left' or 'right'
  afterSlideLoad: function (section, origin, destination, direction, trigger) {
    if (section.anchor === 'work' && destination.index === 1) {
      playProjectVideo();
    }
  },

  // Fires as the user leaves a horizontal slide.
  // Return false to cancel the slide move.
  onSlideLeave: function (section, origin, destination, direction, trigger) {
    if (section.index === 0 && origin.index === 0 && direction === 'left') {
      return false; // Prevent sliding left on the first slide of the first section
    }
  },

  // Fires when the user scrolls inside a section that has scrollOverflow enabled.
  // position: scroll amount in pixels from the top of the section content
  onScrollOverflow: function (section, slide, position, direction) {
    if (position > 300 && direction === 'down') {
      showReadMoreButton();
    }
  },
});

11. API methods.

// Scroll one section upward
fullpage_api.moveSectionUp();

// Scroll one section downward
fullpage_api.moveSectionDown();

// Scroll to a specific section and slide
// Section accepts an anchor string or a 1-based index; slide uses a 0-based index
fullpage_api.moveTo('work', 1);      // Second slide (index 1) of the 'work' section
fullpage_api.moveTo(3);              // Jump to the 3rd section, first slide

// Same as moveTo() but skips the scroll animation — instant jump
fullpage_api.silentMoveTo('contact', 0);

// Advance the horizontal slider of the current section one slide to the right
fullpage_api.moveSlideRight();

// Advance the horizontal slider of the current section one slide to the left
fullpage_api.moveSlideLeft();

// Get an object describing the currently active section
// Returns: { anchor, index, item, isFirst, isLast }
fullpage_api.getActiveSection();

// Get an object describing the currently active horizontal slide
fullpage_api.getActiveSlide();

// Get the current vertical scroll position of the fullPage wrapper
fullpage_api.getScrollY();

// Get the current horizontal scroll position of the active slide
fullpage_api.getScrollX();

// Toggle auto-scrolling on or off at runtime
fullpage_api.setAutoScrolling(false);

// Toggle whether the active section snaps to fill the viewport
fullpage_api.setFitToSection(false);

// Force-snap to the nearest section immediately
fullpage_api.fitToSection();

// Prevent URL anchors from triggering scroll
fullpage_api.setLockAnchors(true);

// Enable or disable scroll gestures (mouse wheel and touch)
// Optional second argument restricts the direction: 'up', 'down', 'left', 'right', or 'all'
fullpage_api.setAllowScrolling(false, 'down');

// Enable or disable keyboard navigation per direction
fullpage_api.setKeyboardScrolling(false, 'down, right');

// Toggle browser history recording for hash changes
fullpage_api.setRecordHistory(false);

// Update transition speed at runtime
fullpage_api.setScrollingSpeed(500);

// Switch into or out of responsive (normal scroll) mode programmatically
fullpage_api.setResponsive(true);

// Rebuild the DOM structure after external changes or AJAX-loaded content
fullpage_api.reBuild();

// Remove all fullPage.js event listeners
fullpage_api.destroy();

// Remove all event listeners AND strip all fullPage.js HTML/CSS modifications
fullpage_api.destroy('all');

// (Extension) Convert horizontal slides to vertical sections
fullpage_api.responsiveSlides.toSections();

// (Extension) Revert vertical sections back to horizontal slides
fullpage_api.responsiveSlides.toSlides();

FAQs

Q: Do I need a license key to use fullPage.js?
A: Yes. The licenseKey option is required regardless of which license applies to your project. If your project is open source and compatible with GPLv3, you can request a free key from the fullPage.js website. Commercial projects require a paid license from the same site. Omitting the key or using an invalid one will display a warning in the console and may enable a watermark depending on the version.

Q: My third-party plugin stops working after fullPage.js initializes. How do I fix this?
A: fullPage.js restructures the DOM when it initializes, so any plugin that scanned the DOM before fullPage.js ran will be looking at stale element references. Move your plugin initialization into the afterRender callback. That callback fires once, after fullPage.js finishes building its structure. This solves the overwhelming majority of plugin conflict reports.

Q: Parallax effects I added with a separate library are broken. What's happening?
A: Most parallax libraries track the window.scrollTop value. fullPage.js translates the wrapper element and keeps scrollTop at 0, so the external library has nothing to react to. Three approaches fix this: use scrollBar: true to restore native scroll, use autoScrolling: false for a standard scroll layout, or use fullPage.js's own parallax extension, which works with the internal translation model directly.

Q: Can I mix auto-scrolling and a fixed header?
A: Yes. Set paddingTop to the height of your header (e.g., paddingTop: '80px') and add your header selector to fixedElements (e.g., fixedElements: '#site-header'). The fixedElements option moves those elements outside the translated wrapper, so they stay visually fixed when CSS3 transforms shift the page.

Q: The URL hash isn't updating when I scroll. Why?
A: Check two things. First, make sure recordHistory is not set to false. Second, check lockAnchors. If it's true, anchor updates in the URL are disabled. If both are at their defaults and the URL still isn't changing, confirm that your section anchors (via anchors array or data-anchor attributes) are defined and do not match any existing id attribute on the page. Colliding IDs cause the browser to intercept the anchor before fullPage.js handles it.

Changelog:

2026-03-06

Updated Doc

v4.0.41 (2026-03-05)

Enhancement: new option cinematic to use the Cinematic extension
Fixed bug: regression. Section padding not respected

v4.0.40 (2025-12-16)

Enhancement: added support for RTL
Enhancement: adding Typescript types declaration
Fixed bug: preventing accidental horizontal swipes

v4.0.39 (2025-12-13)

Fixed bug: kinetic scrolling mouse wheels unable to scroll

v4.0.38 (2025-12-27)

Enhancement: new feature. Slide horizontally using a trackpad or SHIFT + mouse wheel
Fixed bug: animateAnchor getting called with delay (with big media elements)
Fixed bug: keyboardScrolling:false didn't work on init
Fixed bug: fp-viewing class not getting active slide value on load
Fixed bug: scrollOverflow not 100% width if "flex" + "align-items:center" used on section
Fixed bug: internal anchor ahref links broke fullPage.js scroll
Fixed bug: scrollOverflow was not created on dynamically added sections
Fixed bug: missing unbind scrollOverflow on destroy
Fixed bug: destroy('all') will keep empty anchor # on the URL

v4.0.37 (2025-06-27)

Enhancement: making dragAndMove compatible with continuousHorizontal

v4.0.36 (2025-06-05)

Enhancement: not restricting fp-overflow styles to direct child
Fixed bugs

v4.0.35 (2025-04-02)

Fixed bug: The left arrow works like the right arrow
Enhancement: new option effects that provides a way to use the Effects extension.

v4.0.34 (2025-03-04)

Fixed bug: sections won't resize on viewport change when using scrollBar:true
Fixed bug: destroy('all') won't remove the watermark from the DOM
Enhancement: new state class fp-loaded for lazy loaded sections
Fixed bug: css3:false might cause a gap that shows the prev/next section when scrollingSpeed is low

v4.0.33 (2025-03-04)

Fixed bug: The left arrow works like the right arrow in the custom-arrows example
Enhancement: new option adjustOnNavChange to prevent resizing when hiding the address bar

v4.0.32 (2025-01-18)

Fixed bug: Scrollable content could end behind nav bars on mobile devices
Fixed bug: Focusing on a form input when fitToSection:true could scroll the page and hide the input

v4.0.31 (2024-11-29)

Fixed bug: using custom arrows might result in "prev" acting as "next

v4.0.30 (2024-10-15)

Enhancement: "autoplay" media (video, audio) should automatically play
Enhancement: improved skipIntermediateItems example with anchor link
Bugfixes

v4.0.29 (2024-09-07)

Bugfixed

v4.0.28 (2024-08-24)

Added new option lazyLoadThreshold to preload media elements on adjacent sections/slides

v4.0.27 (2024-08-19)

Added new option skipIntermediateItems to skip the animation when jumping non-consecutive sections/slides

v4.0.26 (2024-07-24)

Improved console log warnings
Fixed bugs

v4.0.25 (2024-06-23)

Fixed bug: fullpage.js won't scroll loaded inside iframes when using mouse wheel (trackpad works)

v4.0.24 (2024-06-22)

Fixed bug: regression preventing scroll on scrollable sections

v4.0.23 (2024-06-21)

Fixed bugs
Enhancement: preventing scroll of parent frames on scroll

v4.0.22 (2024-01-31)

Fixed bugs

v4.0.21 (2024-01-31)

Fixed bugs

v4.0.20 (2023-05-30)

Fixed bugs

v4.0.19 (2023-03-14)

Fixed bugs

v4.0.18 (2023-03-02)

Fixed bugs

v4.0.17 (2023-02-17)

Fixed bugs

v4.0.16 (2023-02-03)

Fixed bugs

v4.0.15 (2022-11-23)

Fixed bugs

v4.0.14 (2022-11-12)

Enhancement: allowing extra domains for activations
Bugfixes

v4.0.12 (2022-10-25)

Enhancement: removing commented-out styles
Enhancement: refactoring event strings to properties
Bugfixes

v4.0.11 (2022-09-08)

Enhancement: dynamically content changes can automatically become scrollable with scrollOverflow
Enhancement: tabbing didn't force scroll
Enhancement: reverting fitToSection from CSS Snaps to custom JS
Bugfixes

v4.0.10 (2022-08-08)

Bugfixes

v4.0.9 (2022-05-31)

Fixed bug: Fullpage stops scrolling while swiping before the movement ends
Fixed bug: scrollBar causes no scroll transition scrolling back

v4.0.8 (2022-05-21)

Fixed bug: fullpage.js didn't work on Safari < 13
Fixed bug: scrollOverflow + floating distances prevented it from moving to next section
Fixing bug on input focus on Android
Enhancement: improved scrollBar: true performance with requestAnimationFrame
Fixed bug: fixing problem with react-fullpage & gatsby on redirect alvarotrigo/react-fullpage
Fixed bug: swipe didn't work on touchscreen computers

v4.0.7 (2022-05-10)

Fixed bugs

v4.0.6 (2022-04-19)

Fixed bug: getActiveSlide didn't work
Fixed bug: problems with licenseKey verification

v4.0.5 (2022-04-13)

Fixed bug: scrollOverflow wheel didn't work on touch screen devices
Fixed bug: security issue

v4.0.0/1/2/3/4 (2022-04-12)

Enhancement: customizable navigating arrows
Enhancement: fullPage.js ignores hidden sections on responsive
Enhancement: normal scroll after fullpage
Enhancement: new option observer . fullpage.js reacts to DOM changes
Enhancement: new option scrollOverflowMacStyle
Enhancement: new option controlArrowsHTML for custom arrows
Enhancement: added beforeLeave callback that allows preventing scroll
Enhancement: horizontal navigation bullets will get instant response on slide
Enhancement: added trigger param in all callbacks
Enhancement: added onScrollOverflow callback to track Y position
Enhancement: added getScrollY and getScrollX methods to track positions
Enhancement: scrollable sections can now be scrolled programmatically
Enhancement: verticalCentered will now use flexbox and won't wrap the content
Enhancement: sections will no longer use fixed height in px in favour of 100vh
Enhancement: fitToSection will now use native CSS snaps behaviour
Enhancement: scrollOverflowReset will now admit slides and section values.
Enhancement: changed the way extensions activation works
Enhancement: changed the way fullPage.js license works
Enhancement: new option credits
Fixed bug: scrollbar:true caused flickering
Fixed bug: scrollOverflow accidental scrolling when reading sections' bottom
Fixed bug: scrollOverflow sections were not scrollable by arrow keys
Fixed bug: scrollOverflow prevented Vimeo video turn fullscreen
Fixed bug: scrollOverflow prevented YouTube video turn fullscreen
Fixed bug: scrollOverflow prevented the use of audio controls in IE
Fixed bug: scrollOverflow prevented inputs clicks on mobile
Fixed bug: navigation anchors & scrollBar didn't allow fast clicks on menu
Fixed bug: wrong height of section on IOS 13 and below
Fixed bug: strange bottom rectangle on chrome android
Fixed bug: jQuery adapter failed with minified file
Fixed bug: some options didnt work in minified files
Removed: v2compatible option
Removed: scrolloverflow.min.js dependency
Removed: fitToSectionDelay option
Removed: scrollOverflowOptions option
Removed: IE 9 compatibility

v3.1.2 (2021-06-25)

New Water Effect extension and new options waterEffect and waterEffectOptions

v3.1.1 (2021-05-05)

Fixed bug: callbacks were not getting fired after resize (or on mobile)

v3.1.0 (2021-02-18)

New Drop Effect extension and new options dropEffect and dropEffectOptions
Fixed bug: Data anchors in URL not updating on scroll
Fixed bug: On responsive mode callbacks are not firing
Fixed bug: anchors not updating when using option `sectionSelector
Fixed bug: dragAndMove caused slow transition on goinb back to 1st slide on 1st section

v3.0.9 (2020-07-07)

Fixed bug: normalScrollElements + scrollOverflow when no scrollbar created
Fixed bug: setting isWindowFocused back to true after focus events to allow scrolling again
Fixed bug: scrollOverflow not work in Microsoft Edge #3840
Fixed bug: Lazy load ignores fp-auto-height-reponsive #3944
Fixed bug: error with normalScrollElements and mouse leave to debug console.
Fixed bug: dragAndMove slow move back to 1st slide within section
Fixed bug: fixing screen readers info in horizontal slides bullets
Fixed bug: applying only a few anchors was placing them in the wrong sections
Fixed bug: wrong active section when switching landscape to portrait when using responsiveHeight #3897
Fixed bug: added minimum transition laps when using a very fast scrolling speed
Fixed bug: Responsive Slides extension was losing listeners attached to elements when switching modes
Enhancement: vertical center navigation using 2D transform

v3.0.8 (2019-11-26)

Fixed bug: normalScrollElement bug after clicking on the element
Fixed bug: normalScroll + fixed element didn't work well on firefox
Fixed bug: overflow:scroll isn't scrollable inside scrollOverflow

v3.0.7 (2019-07-11)

Fixed bug: scrollOverflow not working in mobile
Fixed bug: vendor minified files were not up to date
Fixed bug: dist files were not up to date

v3.0.6 (2019-07-10)

Fixed bug: facebook & instagram browser miscalculates page height
Fixed bug: IOS 12 Progressive Web App Responsive resizing
Fixed bug: OrientationChange breaks layout on Chrome mobile
Fixed bug: Lazy loading fp-auto-height does not load all images in viewport
Fixed bug: origin param in afterLoad call back is null
Fixed bug: content gets hidden at the bottom when using lazyload:true and scrolloverflow:true
Fixed bug: dragAndMove was not compatible with normalScrollElements
Fixed bug: scrollOverflow last scroll prevents to scroll to the bottom of a section
Fixed bug: wrong navigation dot activated when using continuousVertical
Fixed bug: normalScrollElements & fancybox not working as expected
Fixed bug: scrollOerflow + verticalCentered + paddingTop
Fixed bug: middle Mouse Scrolling is Broken when using autoScrolling:false
Fixed bug: scrolloverflow IScroll is not defined when using bundler
Fixed bug: $(...).fullpage is not a function after destroy
Fixed bug: Safari iOS - Vertical Align Bug
Fixed bug: normalScrollElements & scrollBar:true & setAllowScrolling method not working together
Enhancement: spacebar won't cause scroll on HTML videos and audios
Removed normalScrollElementTouchThreshold option

v3.0.5 (2019-04-11)

Added new options cards and cardsOptions for the Cards extension
Fixed bug: scrollOverflow vendors file was not up to date and created errors
Fixed bug: setAllowScrolling(false) was still preventing mouse actions on mobile
Fixed bug: dragAndMove slowed down when sliding to 1st slide
Fixed bug: scrollOverflow tilting when reaching bottom
Fixed bug: $.fn.fullpage methods not available in afterLoad
Fixed bug: recordHistory not working with scrollBar:true
Fixed bug: flickering error on Google Chrome 73
Fixed bug: scrollOverflow can't scroll if modal closed on mobile
Fixed bug: enabling the use of multiple menu elements
Enhancement: getFullpageData as function
Enhancement: added touchWrapper option
Documentation: removing link from who is using fulllPage
Documentation: clarify that extensions are only available for fullpage v3
Documentation: updating backers.md

v3.0.4 (2018-11-30)

Updating version and dist files

v3.0.2 (2018-07-26)

Updating version and dist files

v3.0.1 (2018-06-27)

Updating version and dist files

v2.9.7 (2018-04-09)

Updating version and dist files

v2.9.6 (2018-01-30)

Updating version and dist files

v2.9.5 (2017-10-25)

Updating version and dist files

v2.9.4 (2017-03-11)

Added: lazy load for picture srcset elements

v2.9.3 (2017-03-01)

Adding parallax extension

v2.7.9 (2016-04-15)

update

v2.6.6 (2015-06-08)

ixed mousewheel for old firefox versions
Fixed bug with slimScroll
Fixed bug when using scrollBar:true and opening a new tab (ctrl + t)
Added new option lockAnchors to lock anchors #1198
Added new option responsiveHeight
Added new option responsiveWidth replacing the old option responsive
Added new function setLockAnchors
Modified setKeyboardScrolling function to lock keyboard scrolling in specific directions
Added new functionality to cancel the scroll before it takes place
Callback onSlideLeave has now a new parameter nextIndex
Single slide inside section won't show navigation bullets
Added a new functionality to lazy load images, videos and audio elements.
Added a new functionality to play and stop videos/audios when they enter in the viewport

v2.6.5 (2015-05-01)

Fixed bug using scrollOverflow:true and autoScrolling:false #553
Fixed bug using zoom (ctrl + mouse)
afterLoad callback will now fire on page render as well
Fixed bug with setAllowScrolling right and left
Fixed bug which fired multiple callbacks when using continuousVertical
Added new method $.fn.fullpage.silentMove to scroll with no animation
Window resize has no animation now
Added npm installation to the documentation
Improved documentation about Creating links to sections or slides and anchors
Added some more comments in the code

v2.6.3 (2015-04-10)

Solved bug with slide anchors

2014-09-20

Double click over bullets on touch devices no longer needed

2014-07-01

Solved problem with common selectors.

This awesome jQuery plugin is developed by alvarotrigo. For more Advanced Usages, please check the demo page or visit the official website.

Create Fullscreen One Page Scrolling Websites With fullPage.js

Features

Use Cases:

You might also like:

Installation:

How to use it:

FAQs

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review