參數說明
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,//綁定菜單，設定的相關屬性與anchors的值對應后，菜單可以控制滾動，默認為false。
anchors:['firstPage', 'secondPage'],//anchors定義錨鏈接，默認為[]
lockAnchors: false,//是否鎖定錨鏈接，默認為false,設為true后鏈接地址不會改變
navigation: false,//是否顯示導航，默認為false
navigationPosition: 'right',//導航小圓點的位置
navigationTooltips: ['firstSlide', 'secondSlide'],//導航小圓點的提示
showActiveTooltip: false,//是否顯示當前頁面的tooltip信息
slidesNavigation: true,//是否顯示橫向幻燈片的導航，默認為false
slidesNavPosition: 'bottom',//橫向導航的位置，默認為bottom，可以設置為top或bottom
//Scrolling
css3: true,//是否使用CSS3 transforms來實現滾動效果，默認為true
scrollingSpeed: 700,//設置滾動速度，單位毫秒，默認700
autoScrolling: true,//是否使用插件的滾動方式，默認為true,若為false則會出現瀏覽器自帶滾動條
fitToSection: true,//設置是否自適應整個窗口的空間，默認值：true
scrollBar: false,//是否包含滾動條，默認為false,若為true瀏覽器自帶滾動條出現
easing: 'easeInOutCubic',//定義頁面section滾動的動畫方式，若修改此項需引入jquery.easing插件
easingcss3: 'ease',//定義頁面section滾動的過渡效果，若修改此項需引入第三方插件
loopBottom: false,//滾動到最低部后是否連續滾動到頂部，默認為false
loopTop: false,//滾動到最頂部后是否連續滾動到底部，默認為false
loopHorizontal: true,//橫向slide幻燈片是否循環滾動，默認為true
continuousVertical: false,//是否循環滾動，不兼容loopTop和loopBottom選項
normalScrollElements: '#element1, .element2',//避免自動滾動，滾動時的一些元素，例如百度地圖
scrollOverflow: false,//內容超過滿屏后是否顯示滾動條，true則顯示滾動條，若需滾動查看內容還需要jquery.slimscroll插件的配合
touchSensitivity: 15,//在移動設備中滑動頁面的敏感性，默認為5最高100，越大越難滑動
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,//是否可以使用鍵盤方向鍵導航，默認為true
animateAnchor: true,//錨鏈接是否可以控制滾動動畫，默認為true,若為false則錨鏈接定位失效
recordHistory: true,//是否記錄歷史，默認為true,瀏覽器的前進后退可導航。若autoScrolling:false,那么這個屬性將被關閉
//Design
controlArrows: true,//定義是否通過箭頭來控制slide,默認true
verticalCentered: true,//定義每一頁的內容是否垂直居中，默認true
resize : false,//字體是否隨窗口縮放而縮放，默認false
sectionsColor : ['#ccc', '#fff'],//為每個section設置background-color屬性
paddingTop: '3em',設置每一個section頂部的padding,默認為0
paddingBottom: '10px',設置每一個section底部的padding,默認為0
fixedElements: '#header, .footer',固定元素，默認為null,需要配置一個jquery選擇器，在頁面滾動時，fixElements設置的元素不滾動
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',//section選擇器。默認為.section
slideSelector: '.slide',//slide選擇器，默認為.slide
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});
menu
默認值：false，一個選擇器可以用來指定要與滾動互動的導航菜單，有點類似與Bootstrap的滾動監聽。這樣到滾動到某個section時，對應的菜單會被自動添加active類。
注意，這個選項不會自動生成一個導航菜單，僅僅是給指定的菜單中當前菜單項添加一個active活動類。
為了讓自定義導航菜單和屏幕section互動，需要給菜單添加一個HTML5的自定義屬性（data-menuanchor），需要和錨文本設置相同的內容，例如下面的示例代碼：
<ul id="myMenu">
<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
注意：注意這個自定義的菜單代碼應該放置到插件設置的內容外面，避免因為排版不兼容問題可以使用css3:true，否則將被附加到body的插件本身。
anchors
默認值：[]，定義導航的錨文本信息例如（#example），每個導航文本之前用英文逗號（,）分隔，快速導航的錨文本URL也是使用的這個文本，瀏覽器通過此錨文本鏈接可以支持前進和后退按鈕功能。
此選項的設置還可以作為用戶的書簽，當用戶打開帶有錨文本的URL時，Fullpage可以自動跳轉到對應的section屏幕或者slide幻燈片位置。
注意，如果你使用了此選項，那么網頁中不能有相同的ID，一來Fullpage插件無法准確的定位到section屏幕或者slide幻燈片位置，二來這也有悖網頁中CSS的編寫規范。
lockAnchors
默認值：false，確定是否在URL中的錨點將在插件有任何影響。你仍然可以使用錨內部自己的函數和回調，但他們不會有任何作用，在網站的滾動。如果你想把fullpage.js在URL使用錨其他插件。
注意，這樣的設置有助於了解anchors選項在側邊欄菜單的對應關系，與類的元素的值。通過.section它在標記的位置。
navigation
默認值：false，如果設置為true，那他將會顯示一個小圓圈組成的快速導航欄。
navigationPosition
默認值：none，結合參數navigation一起使用，用於設置navigation定義的菜單顯示的位置，可以設置為left/right。
navigationTooltips
默認值：[]，定義當navigation設置為true的時候，鼠標移動到快速導航上面的提示文本，每個屬性中間用英文半角逗號（,）隔開。
showActiveTooltip
默認值：false，設置是否自動顯示navigationTooltips中設置的工具提示文本。
slidesNavigation
默認值：false，使用方法同navigation，不過這個參數設置的導航顯示位置不同，而且這個是用戶設置幻燈片的。
slidesNavPosition
默認值：bottom，定義slidesNavigation中設置的導航菜單顯示的位置，可選的設置值為top/bottom，你可能要修改CSS樣式確定的距離從頂部或底部以及任何其他風格如顏色。
css3
默認值：true，確定是否使用JavaScript和CSS3轉換滾動在切片和幻燈片。加快平板電腦和移動設備的瀏覽器支持CSS3的運動有益。如果此選項設置為true，瀏覽器不支持CSS3，jQuery回調函數將被替代。
scrollingSpeed
默認值：700，每個屏幕滾動動畫執行的時間，時間的單位為毫秒（ms）。
autoScrolling
默認值：true，定義屏幕是否自動滾動，還是需要用戶觸發事件滾動，它也影響了部分適合在平板電腦和手機瀏覽器/設備窗口。
fitToSection
默認值：true，設置是否自適應整個窗口的空間，以某個section的內容為分界線，設置為true時，某個的section將填充到整個頁面，否者用戶可以停留在網頁的任何位置。
scrollBar
默認值：false，定義是否使用瀏覽器默認的滾動條，如果使用瀏覽器默認的滾動條，autoScrolling配置任然生效，用戶也可以自由滾動的網站與滾動條和fullpage.js將適合的部分在屏幕滾動時完成。
easing
默認值：easeInOutCubic，定義了用於垂直和水平滾動的過渡效果，它要求文件vendors/jquery.easings.min.js或者jQuery UI插件，具體的動畫效果你可以參考 easings插件介紹 ，你也可以使用其它的動畫插件庫。
easingcss3
默認值：ease，定義在滾動屏幕中使用css3:true設置的過度效果，你可以使用 CSS3 transition-timing-function 屬性 自定義多個動畫效果，例如：linear、ease-out、……，或者使用cubic-bezier方法創建自定義的動畫效果，你可能想要使用 Matthew Lein CSS Easing Animation Tool 創建這個。
loopBottom
默認值：false，定義屏幕滾動到最后一個后，是否循環滾動到第一個。
loopTop
默認值：false，定義屏幕滾動到第一個后，是否循序滾動到最后一個。
loopHorizontal
默認值：true，定義水平的幻燈片是否循環切換。
continuousVertical
默認值：false，定義向下滾動到最后一節是否應該向下滾動到第一個，如果向上滾動的第一部分應該滾動到最后一個。不兼容loopTop和loopBottom選項。
normalScrollElements
默認值：null，如果你想避免自動滾動，滾動時的一些元素，這是你需要使用的選項。（有用的地圖，滾動div等）需要對這些元素的jQuery選擇器字符串。例如：normalScrollElements: ‘#element1, .element2’。
scrollOverflow
默認值：false，設置當內容超過屏幕的高度的時候，是否裁切多余的內容。
- 當設置為true時，你的內容將會被自動裁切，可以考慮當afterRender回調函數調用的時候，處理你的內容的多少或者使用其它的插件庫合理的處理多余的內容。
- 當設置為false時，插件不會自動裁切多余的內容，但是剩下沒有顯示的內容任然不能顯示，此時，你可以使用 jquery.slimscroll.min插件來自定義滾動事件，如果要使用這個插件，應該在Fullpage插件之前引入，例如下面的代碼：
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script> <script type="text/javascript" src="jquery.fullPage.js"></script>
touchSensitivity
默認值：5，定義了瀏覽器窗口的寬度/高度的百分比，多遠的觸摸滑動可以跳轉到下一個section / slide。
normalScrollElementTouchThreshold
默認值：5，定義了一個數字，測試HTML標簽樹的機構，是否在在移動設備上支持觸摸事件。
keyboardScrolling
默認值：true，定義是否可以通過鍵盤箭頭事件控制section的滾動。
animateAnchor
默認值：true，定義當網頁的URL中有錨文本的時候，是否幫用戶定位到對應的section或者slide。
recordHistory
默認值：true，定義是否將網頁滾動的的狀態紀錄到瀏覽器的歷史記錄中。
- 當設置為true時，每一個section/slide滾動的狀態將紀錄到瀏覽器的歷史紀錄中，這樣的設置有利於用戶方便回退到剛才瀏覽的內容。
- 當設置為false時候，用戶的瀏覽路徑不會記錄到瀏覽器的歷史紀錄中，如果要取消這個選項可以使用autoScrolling:false。
controlArrows
默認值：true，決定是否使用控制箭頭向左或向右移動幻燈片。
verticalCentered
默認值：true，決定是否初始化后，是否垂直居中網頁的內容，如果你想自定義元素的位置，那么你可以設置為false，在插件初始化后調用afterrender回調函數加載其它的腳本庫設置你網頁的內容。
resize
默認值：true，是否在窗口改變大小后，自動調整網頁中字體的大小。
sectionsColor
默認值：none，定義每個section的CSS背景演示，例如下面的代碼：
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
如果設置的參數不對稱，比如屏幕個數多余設置的顏色個數，那么多余的屏幕默認沒有背景顏色，如果屏幕個數少於設置的顏色個數，那么多余的顏色將不顯示。
paddingTop
默認值：0，定義每個section固定的頭部留白，例如設置paddingTop: ’10px’、 paddingTop: ’10em’、……，在使用固定表頭的情況下有用的。
paddingBottom
默認值：0，定義每個section固定的底部留白，例如設置paddingBottom: ’10px’、 paddingBottom: ’10em’、……，在使用固定底部導航的情況下有用的。
fixedElements
默認值：null，定義的某個元素是否在網頁的固定位置，元素將被關閉的插件是必要的時候，使用CSS3的選項保持滾動結構固定。它需要對這些元素的jQuery選擇器字符串。例如：fixedElements: ‘#element1, .element2’。
responsiveWidth
默認值：0， A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his 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.
responsiveHeight
默認值：0， A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his 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.
sectionSelector
默認值：.section，定義用於選擇全屏滾動內容的jQuery選擇器。它可能需要改變，有時為了避免與其他插件使用相同的選擇器作為整版的問題。
slideSelector
默認值：.slide，定義用於插件幻燈片jQuery選擇器。它可能需要改變，有時為了避免與其他插件使用相同的選擇器fullpage.js問題。
onLeave (index, nextIndex, direction)
滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數
- index 是離開的“頁面”的序號，從1開始計算；
- nextIndex 是滾動到的“頁面”的序號，從1開始計算；
- direction 判斷往上滾動還是往下滾動，值是 up 或 down。
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
var leavingSection = $(this);
//after leaving section 2
if(index == 2 && direction =='down'){
alert("Going to section 3!");
}
else if(index == 2 && direction == 'up'){
alert("Going to section 1!");
}
}
});
取消section的滾動
你可以在onLeave 回調函數中返回false，那么將取消滾動。
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
//it won't scroll if the destination is the 3rd section
if(nextIndex == 3){
return false;
}
}
});
afterLoad (anchorLink, index)
滾動到某一屏后的回調函數，接收 anchorLink 和 index 兩個參數。
- anchorLink 是錨鏈接的名稱
- index 是section的索引，從1開始計算
在沒有設置錨文本的情況下，只有使用唯一的index參數。
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad: function(anchorLink, index){
var loadedSection = $(this);
//using index
if(index == 3){
alert("Section 3 ended loading");
}
//using anchorLink
if(anchorLink == 'secondSlide'){
alert("Section 2 ended loading");
}
}
});
afterRender()
這個回調函數只是在生成頁面結構的時候調用。這是要用來初始化其他插件或刪除任何需要的文件准備好代碼的回調（這個插件修改DOM創建得到的結構）。
$('#fullpage').fullpage({
afterRender: function(){
var pluginContainer = $(this);
alert("The resulting DOM structure is ready");
}
});
afterResize()
這個回調函數在窗口發生大小改變的時候被調用，就在部分調整。
$('#fullpage').fullpage({
afterResize: function(){
var pluginContainer = $(this);
alert("The sections have finished resizing");
}
});
afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)
滾動到某一水平滑塊后的回調函數，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數。
- anchorLink: anchorLink corresponding to the section.
- index: index of the section. Starting from 1.
- slideAnchor: anchor corresponding to the slide (in case there is)
- slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)
在沒有anchorlinks的幻燈片或幻燈片SlideIndex參數是唯一使用定義的情況下。
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
var loadedSlide = $(this);
//first slide of the second section
if(anchorLink == 'secondPage' && slideIndex == 1){
alert("First slide loaded");
}
//second slide of the second section (supposing #secondSlide is the
//anchor for the second slide
if(index == 2 && slideIndex == 'secondSlide'){
alert("Second slide loaded");
}
}
});
onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)
某一水平滑塊滾動前的回調函數，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數。
- anchorLink: anchorLink corresponding to the section.
- index: index of the section. Starting from 1.
- slideIndex: index of the slide. Starting from 0.
- direction: takes the values right or left depending on the scrolling direction.
- nextSlideIndex: index of the destination slide. Starting from 0.
$('#fullpage').fullpage({
onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
var leavingSlide = $(this);
//leaving the first slide of the 2nd Section to the right
if(index == 2 && slideIndex == 0 && direction == 'right'){
alert("Leaving the fist slide!!");
}
//leaving the 3rd slide of the 2nd Section to the left
if(index == 2 && slideIndex == 2 && direction == 'left'){
alert("Going to slide 2! ");
}
}
});
取消slide滑動
你可以設置回調函數onSlideLeave 返回false，那么他將阻止此次的滑動事件，就像onLeave一樣。
Fullpage方法函數
$.fn.fullpage.moveSectionUp();//向上滾動一頁 $.fn.fullpage.moveSectionDown();//向下滾動一頁 $.fn.fullpage.moveTo(section,slide);//從1開始，slide從0開始 $.fn.fullpage.silentMoveTo(section,slide);//和moveTo一樣，但是沒有滾動效果 $.fn.fullpage.moveSlideRight();//幻燈片向右滾動 $.fn.fullpage.moveSlideLeft();//幻燈片向左滾動 $.fn.fullpage.setAutoScrolling(boolean);//動態設置autoScrolling $.fn.fullpage.setLockAnchors(boolean);//動態設置lockAnchors $.fn.fullpage.setRecordHistory(boolean);//動態設置recordHistory $.fn.fullpage.setScrollingSpeed(milliseconds);//動態設置scrollingSpeed $.fn.fullpage.destory(type);//銷毀fullpage,type可以不寫或者使用all $.fn.fullpage.reBuild();/重新更新頁面和尺寸，用於ajax請求改變頁面結構后重建效果
moveSectionUp()
設置section向上滾動
$.fn.fullpage.moveSectionUp();
moveSectionDown()
設置section向下滾動
$.fn.fullpage.moveSectionDown();
moveTo(section, slide)
設置屏幕滾動到某個section或者slide，兩個參數都是某個內容塊的索引值或者是錨文本，默認情況下slide的索引被設置為0。
/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.moveTo('firstSlide', 2);
//Scrolling to the 3rd section in the site
$.fn.fullpage.moveTo(3, 0);
//Which is the same as
$.fn.fullpage.moveTo(3);
silentMoveTo(section, slide)
這個函數的用法和MoveTo方法完全一樣，只是MoveTo在切換的時候有動畫效果，而silentMoveTo方法在切換的時候沒有動畫效果，直接跳轉到對應的section中。
/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.silentMoveTo('firstSlide', 2);
moveSlideRight()
設置幻燈片向右滑動，將下一個幻燈片顯示在當前的屏幕中。
$.fn.fullpage.moveSlideRight();
moveSlideLeft()
設置幻燈片向左滑動，將上一個幻燈片顯示在當前的屏幕中。
$.fn.fullpage.moveSlideLeft();
setAutoScrolling(boolean)
可以實時的控制頁面滾動的方式，可選的參數false/true。
- 如果參數被設置為true，所有的section將自動滾動。
- 如果參數被設置為false，所有的section將不會自動滾動，需要用戶手動或者使用瀏覽器的滑條滾動網頁。
注意，scrollOverflow參數如果設置為true，它可能很難滾動鼠標滾輪或觸摸板當部分滾動。
$.fn.fullpage.setAutoScrolling(false);
setFitToSection(boolean)
該函數設置選項fitToSection確定是否自適應section在屏幕上。
$.fn.fullpage.setFitToSection(false);
setLockAnchors(boolean)
設置選項lockAnchors確定將錨文本鎖定到URL中。
$.fn.fullpage.setLockAnchors(false);
setAllowScrolling(boolean, [directions])
添加或者禁止Fullpage自動綁定的鼠標滑輪和移動觸摸事件，不過用戶任然可以通過鍵盤和點擊快速導航的方式切換section/slide。要取消鍵盤事件你應該使用setKeyboardScrolling方法。
- directions，可選參數，可以設置的值：all, up, down, left, right或者設置組合的參數，例如down, right，他設置的兩個方向上將禁止或者激活滾動。
//disabling scrolling $.fn.fullpage.setAllowScrolling(false); //disabling scrolling down $.fn.fullpage.setAllowScrolling(false, 'down'); //disabling scrolling down and right $.fn.fullpage.setAllowScrolling(false, 'down, right');
setKeyboardScrolling(boolean, [directions])
添加或者禁止鍵盤對section/slide的控制，這個事件是默認綁定的。
- directions，可選參數，可以設置的值：all, up, down, left, right或者設置組合的參數，例如down, right，他設置的兩個方向上將禁止或者激活鍵盤的滾動。
//disabling all keyboard scrolling $.fn.fullpage.setKeyboardScrolling(false); //disabling keyboard scrolling down $.fn.fullpage.setKeyboardScrolling(false, 'down'); //disabling keyboard scrolling down and right $.fn.fullpage.setKeyboardScrolling(false, 'down, right');
setRecordHistory(boolean)
定義是否為每個URL的變更紀錄到瀏覽器中的歷史記錄中。
$.fn.fullpage.setRecordHistory(false);
setScrollingSpeed(milliseconds)
定義每個section/slide滾動的時間，默認的時間單位為毫秒（ms）。
$.fn.fullpage.setScrollingSpeed(700);
destroy(type)
移除Fullpage的事件和添加的HTML/CSS樣式風格，理想的使用在使用Ajax加載內容。
- type：可以被設置為空字符，或者all，如果一旦執行，通過Fullpage添加的HTML/CSS樣式和代碼都將會被移除，將顯示沒有使用Fullpage的樣式，一個使用過任何插件進行修改。
//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();
//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');
reBuild()
更新DOM結構以適應新的窗口大小或其內容。理想的使用與Ajax調用或外部網站的DOM結構的變化組合。
$.fn.fullpage.reBuild();
資源延時加載
fullpage.js提供了一種懶加載圖像，視頻和音頻元素，所以他們不會放慢您的網站加載或不必要的浪費數據傳輸。使用延遲加載時，所有這些元素只會加載時進入視口。啟用延遲加載，所有你需要做的是改變你的src屬性的data-src如下圖所示：
<img data-src="image.png"> <video> <source data-src="video.webm" type="video/webm" /> <source data-src="video.mp4" type="video/mp4" /> </video>