fullPage.js是基於JQuery的外掛，它能夠很方便、很輕鬆的製作出全屏網站，主要功能有：

• 支援滑鼠滾動
• 多個回撥函式
• 支援手機、平板觸控事件
• 支援css3動畫
• 支援視窗縮放，視窗縮放時自動調整
• 可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊方式等

基本使用

在html檔案中首先引入fullPage.js,fullPage.js需要JQuery1.6以上版本支援。

• 可以先下在檔案，再引入。
• 線上引入(www.cdnjs.com)

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage
 
.css

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.js

直接上程式碼，html程式碼：

<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>

js程式碼：

$(document).ready(function() {
    $('#fullpage').fullpage();
});

fullpage()程式碼可以新增引數：

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors:['firstPage', 'secondPage', 'thirdPage']
    });
});

上面的程式碼，給每一頁設定錨點，下面的程式碼可以實現同樣的功能：

<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>

這裡使用了data-anchor屬性，同樣可以為每頁設定錨點。注意，data-anchor應該全域性唯一。

State classes added by fullpage.js

Fullpage.js adds multiple classes in different elements to keep a record of the status of the site:

• The class active is added the current visible section and slide.

• The class active is added to the current menu element (if using the
  menu option).

• A class of the form fp-viewing-SECTION-SLIDE is added to the body
  element of the site. (eg: fp-viewing-secondPage-0) The SECTION and
  SLIDE parts will be the anchors (or indexes if no anchor is provided)
  of the current section and slide.

• The class fp-responsive is added to the body element when the
  entering in the responsive mode

• The class fp-enabled is added to the html element when fullpage.js is
  enabled. (and removed when destroyed).

• The class fp-destroyed is added to the fullpage.js container when the
  plugin is destroyed.

• To create smaller sections just use the class fp-auto-height in the
  section you want to apply it. It will then take the height defined by
  your section/slide content.

選項

continuousVertical 是否迴圈，與loopTop/loopButton不同，不會跳變
Anchros: 為每頁設定錨點，預設是一個空陣列
lockAnchors 鎖住錨點
animateAnchro 訪問錨點時，是否是直接進入
recordHistory 記錄瀏覽器滾動歷史，預設為true。注意，如果設定了autoScrolling:false，那麼這個配置也將被關閉。
Menu 設定選單
Navigation 是否顯示導航，預設為false。如果設定為true，會顯示小圓點，昨晚導航。
navigationPostion 設定小圓點的位置，可以設定為left或right。
navigationTooltips 導航小圓點的tooltips設定，預設為空陣列，注意按順序設定。
showActiveTooltip 是否顯示當前頁面的導航的tooltip資訊，預設為false.
slideNavigation 實現顯示橫向幻燈片的導航，預設為false。
slideNavPosition 橫向幻燈片導航的位置，預設為bottom,可以設定為top或bottom。
scrollOverflow 內容超過滿屏後是否顯示滾動條，預設為false。如果設定為true,則會顯示滾動條，如果要滾動檢視內容，還需要jquery.slimscroll外掛的配合。jquery.slimscroll外掛主要用於模擬傳統的瀏覽器滾動條。
sectionSelector section的選擇器，預設為.section。
slideSelector slide的選擇器，預設為.slide。

Method

moveSectionUp() 向上滾動一頁。
moveSectionDown() 向下滾動一頁。
moveTo(section, slide) 滾動到第幾頁，第幾個幻燈片，注意頁數是從1開始，幻燈片是從0開始。
slientMoveTo(section, slide) 滾動到第幾頁，和moveTo一樣，但是沒有動畫效果。
moveSlideRight() 幻燈片向右滾動。
moveSlideLeft() 幻燈片向左滾動。
setAutoScrolling(boolean) 動態設定autoScrolling
setLockAnchors(boolean) 動態設定lockAnchors
setRecordHistory(boolean) 動態設定recordHistory
setScrollingSpeed(milliseconds) 動態設定scrollingSpeed
setAllowScrolling(boolean[,directions]) 新增或刪除滑鼠滾動控制，第一個引數true為啟用，false為禁用，後面新增的引數為方向，取值包含all,up,down,left,right,可以使用多個，逗號隔開。
比如在做一個有獎問答的頁面，問題資訊在前面的頁面有答案，當滾動到最後一頁時，不希望使用者滾回之前的頁面檢視問題答案，可以使用這個方法。
Destory(type)
銷燬fullpage特效，type可以不寫，或者使用all，不寫type,fullpage給頁面新增的樣式和html元素還在，如果使用all,則樣式、html等全部銷燬，頁面恢復到不使用fullpage的效果。
reBuild() 重新更新頁面和尺寸，用於通過ajax請求後改變了頁面結構之後，重建效果。

回撥函式

afterLoad(anchorLink, index)
滾動到某一section，且滾動結束後，會觸發一次此回撥函式，函式接收anchorLink和index兩個引數，anchorLink是錨鏈接的名稱，inde是序號，從1開始計算。
onLeave(index,nextIndex,direction)
當離開一個section時，會觸發一次此回撥函式，接收index/nextIndex和direction3個引數，通過返回return false;可以取消滾動。
afterRender()
頁面結構生成後的回撥函式
afterResize()
瀏覽器視窗尺寸改變後的回撥函式
afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滾動到某一幻燈片後的回撥函式，與afterLoad類似。
onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
對應onLeave函式