Create Beautiful Fullscreen Scrolling Websites Using switchPage.js

File Size: 1.87 MB
Views Total: 5340
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Beautiful Fullscreen Scrolling Websites Using switchPage.js

switchPage.js is a small (~5kb) jQuery plugin for create a beautiful fullscreen scrolling website which allows you switch between sectioned pages with mouse wheel or keyboard arrows.


  • Support either 'vertical' or 'horizontal' scrolling direction.
  • Auto scroll back to the first page as you reach the last one.
  • Side bullets indicator.
  • Custom page transition speed.

How to use it:

1. Import and place the switchPage.js script at the bottom of your webpage.

<script src="//"></script>
<script src="switchPage.js"></script>

2. Add sectioned content into the webpage as displayed below.

<div id="container">
  <div class="section active">
    Section One
  <div class="section">
    Section Two   
  <div class="section" id="section2">
    Section Three

3. Make the sectioned content 100% width & height.

* {
  padding: 0;
  margin: 0;

html, body {
  height: 100%;
  overflow: hidden;

#container, .section {
  height: 100%;
  position: relative;

4. Initialize the plugin with default parameters.

    // options here

5. Options and defaults.


    // top container
    'container': '#container',

    // content sections
    'sections': '.section',

    // ease-in,ease-out,linear
    'easing': 'ease', 

    // animation speed
    'duration': 1000,

    // shows pagination
    'pagination': true,

    // enable infinite loop
    'loop': false, 

    // enable keyboard support
    'keyboard': true,

    // vertical or horizontal
    'direction': 'vertical', 

    // callback function
    'onpageSwitch': function(pagenum) {}

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