Create Fast And Simple Fullscreen One Page Scrolling Websites | fullPage.js

fullPage.js is a simple and easy-to-use library that creates fullscreen scrolling websites (also known as single-page websites or one-page sites) and adds landscape sliders within sections of the site.

This jQuery and vanilla JavaScript plugin for a one-page website allows you to create vertical or horizontal scrolling web pages with smooth animations and easy options.
Under GPL-3.0.


  • Not only vertical scrolling but also horizontal scrolling.
  • easy to use. Configuration and Customization.
  • Working in modern and old browsers too!
  • Responsively designed to fit different screen sizes as well as tablets and mobile devices.
  • Auto scrolling on page load
  • Supports mouse wheel scrolling
  • Image/video lazy load.
  • Also can be used as a vanilla JavaScript plugin.
  • Reaction and angular cover.

How to make use of it:

1. Include the most recent model of the jQuery library in your one web page website.

<script src="//"></script>

2. Include an easing library for additional easing results. E.g. jQuery UI, jQuery easing plugin.

<script src=""></script>
<script src=""></script>

3. Include the completePage.js plugin’s information on the internet web page.

<link rel="stylesheet" href="fullpage.css" />
<script src="fullpage.js"></script>

4. Create the HTML for your one web page website.

<div id="fullpage">
  <div class="section">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>

5. The plugin additionally helps nested pages.

<div id="fullpage">
  <div class="section">One</div>
  <div class="section">
    <div class="slide" data-anchor="slide1">Two 1</div>
    <div class="slide" data-anchor="slide2">Two 2</div>
  <div class="section">Three</div>

6. You may create some navigation links to scroll between sections by mouse click on.

<ul id="menu">
  <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
  <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
  <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>

7. Call the plugin to allow the one web page scrolling impact.

// vanilla JavaScript
new fullpage('#fullpage', {
    // options here

// jQuery
  // options here

8. All plugin choices to customize the one web page scrolling impact.

// A selector used to specify the menu to link with the sections
menu: '#menu',

// Whether anchors in the URL will have any effect at all in the library
lockAnchors: false,

// Defines the anchor links
anchors:['firstPage', 'secondPage'],

// Enables navigation
navigation: false,

// Or 'left'
navigationPosition: 'right',

// An array of tooltips
navigations: ['firstSlide', 'secondSlide'],

// Enables active tooltip
showActiveTooltip: false,

// Shows a navigation for each landscape slide
slides: false,

// Or 'top'
slidesNavPosition: 'bottom',

// Whether to use JavaScript or CSS3 transforms
css3: true,

// speed in ms
scrollingSpeed: 700,

// Enables auto scrolling
autoScrolling: true,

// Auto fits sections to the viewport
fitToSection: true,

// In ms
fitToSectionDelay: 1000,

// Shows browser scrollbar
scrollBar: false,

// Easing effect
easing: 'easeInOutCubic',
easingcss3: 'ease',

// Auto scrolls to the top/bottom
loopBottom: false,
loopTop: false,

// Enables infinite looping on horizontal sliders
loopHorizontal: true,

// Defines whether scrolling down in the last section or should scroll down to the first one and if scrolling up in the first section should scroll up to the last one. 
continuousVertical: false,

// Defines whether sliding right in the last slide should slide right to the first one or not, and if scrolling left in the first slide should slide left to the last one or not.
continuousHorizontal: false,

// Slides horizontally within sliders by using the mouse wheel or trackpad
scrollHorizontally: false,

// Moving one horizontal slider will force the sliding of sliders in other section in the same direction
interlockedSlides: false,

// Enables drag and move
// true: enables the feature.
// false: disables the feature.
// vertical: enables the feature only vertically.
// horizontal: enables the feature only horizontally.
// fingersonly: enables the feature for touch devices only.
// mouseonly: enables the feature for desktop devices only (mouse and trackpad).
dragAndMove: false,

// Use non full screen sections based on percentage
offsetSections: false,

// Resets every slider after leaving its section
resets: false,

// Uses fade effect instead
fadingEffect: false,

// If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for, scrolling divs etc.) 
// It requires a string with the Javascript selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). 
normalScrollElements: '#element1, .element2',

// Creates a scroll for the section/slide in case its content is bigger than the height of it
// Requires: /vendor/scrolloverflow.js
scrollOverflow: false,

// Scrolls up the content of the section/slide with scroll bar when leaving to another vertical section
scrollOverflowReset: false,

// Requires iScroll.js library
scrollOverflowOptions: null,

// Defines a percentage of the browsers window width/height, and how far a swipe must measure for navigating to the next section / slide.
touchSensitivity: 5,

// Defines how to scroll to a section which size is bigger than the viewport.
// top, bottom, null
bigSectionsDestination: null,

// Accessibility
keyboardScrolling: true,

// Enables smooth scroll on anchor links
animateAnchor: true,

// Records URL history
recordHistory: true,

// Shows navigation arrows
controlArrows: true,

// Vertically centered?
verticalCentered: true,

// An array of colors for page sections
sectionsColor : ['#ccc', '#fff'],

// padding in pixels
paddingTop: '3em',
paddingBottom: '10px',

// Which elements will be taken off the scrolling structure of the plugin which is necessary when using the css3 option to keep them fixed
fixedElements: '#header, .footer',

// A normal scroll (autoScrolling:false) will be used under the defined width in pixels
responsiveWidth: 0,

// A normal scroll (autoScrolling:false) will be used under the defined height in pixels
responsiveHeight: 0,

// When set to true slides will be turned into vertical sections when responsive mode is fired
responsiveSlides: false,

// Enables backgrounds effects
parallax: false,

// Parallax options
parallaxOptions: {
  type: 'reveal',
  percentage: 62,
  property: 'translate'

// Enables card effects
cards: false,

// Card options
cardsOptions: {
  perspective: 100,
  fadeContent: true,
  fadeBackground: true

// Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',

// Lazy load media elements
lazyLoading: true

9. Callback capabilities.

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
      // ...

    onLeave: function(origin, destination, direction){
      // ...

    afterRender: function(){
      // ...

    afterResize: function(width, height){
      // ...

    afterReBuild: function(){
      // ...

    afterSlideLoad: function(section, origin, destination, direction){
      // ...

    onSlideLeave: function(section, origin, destination, direction){
      // ...

    afterResponsive: function(isResponsive){
      // ...

10. API strategies.

// Gets the active section and its properties

// Gets the active slide and its properties

// Scrolls up

// Scrolls down

// Moves to a specific section & slide
fullpage_api.moveTo('firstSlide', 2);
fullpage_api.moveTo(3, 0);

// Without animation
silentMoveTo(section, slide)
fullpage_api.silentMoveTo('firstSlide', 2);

// Scrolls right

// Scrolls left

// Sets auto scrolling

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

// Fit the active section to the viewport

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

// Adds or remove the possibility of scrolling through sections/slides by using the mouse wheel/trackpad or touch gestures (which is active by default) 
fullpage_api.setAllowScrolling(false, 'down');
fullpage_api.setAllowScrolling(false, 'down, right');

// Adds or remove the possibility of scrolling through sections by using the keyboard (which is active by default)
fullpage_api.setKeyboardScrolling(false, 'down');
fullpage_api.setKeyboardScrolling(false, 'down, right');

// Enables/disables URL history

// Sets the scrolling speed in milliseconds.

// Destroys the plugin

// Re-builds the plugin

// Sets the responsive mode of the page

// Turns horizontal slides into vertical sections

// Turns back the original slides (now converted into vertical sections) into horizontal slides again

Create Fullscreen One Page Scrolling Websites, fullPage.js Plugin/Github

See Demo And Download

Official Website(alvarotrigo): Click Here

This superior jQuery/javascript plugin is developed by alvarotrigo. For extra Advanced usage, please go to the official website.

Related Posts


Create Side Sliders Input Values Using Mouse Drag | Pointer Lock

HTML Range Slider is a lightweight library to create side sliders to adjust values easily and precisely by making use of the Pointer Lock API. Side Slider…


Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance. Main Features Extremely lightweight with no dependencies A few kilobytes of pure…


How to Convert Form Data to JSON with HTML Forms | FormsJS

FormsJS is a simple-to-use JavaScript library that covers type subject values to JSON in real time. The items containing the data category will be analyzed automatically. It…


A Small jQuery Extension to Convert An Editable HTML Table

Editable Table is a small jQuery extension to convert an editable HTML table for fast data entry and validation. A small jQuery extension to convert a static…

Simple jQuery Plugin for Embedding YouTube Videos As Cover Background is a jQuery plugin built to facilitate YouTube embeds as cover wallpaper using the YouTube Embed API. There is another jQuery Youtube Video Background plugin that…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…