引入檔案

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

HTML結構

<div id="fullpage">
    <div class="section">第一屏</div
 
>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第1屏</div>
        <div class="slide">第三屏的第2屏</div>
        <div class="slide">第三屏的第3屏</div>
        <div class="slide">第三屏的第4屏</div>
    </div
 
>
    <div class="section">第四屏</div>
</div>

JavaScript

$(function(){
    $('#fullpage').fullpage({
        'verticalCentered': false,
        'css3': true,
        'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
        anchors: ['page1', 'page2', 'page3', 'page4'
 
],
        'navigation': true,
        'navigationPosition': 'right',
        'navigationTooltips': ['fullPage', 'Powerful', 'Amazing', 'Simple']
    })
})

經測試，至少需要一個引數，否則火狐第一次滾動會直接滾到底部。

選項 型別 預設值 說明 verticalCentered 字串 true 內容是否垂直居中 resize 布林值 false 字型是否隨著視窗縮放而縮放 slidesColor 函式 無 設定背景顏色 anchors 陣列 無 定義錨鏈接 scrollingSpeed 整數 700 滾動速度，單位為毫秒 easing 字串 easeInQuart 滾動動畫方式 menu 布林值 false 繫結選單，設定的相關屬性與 anchors 的值對應後，選單可以控制滾動 navigation 布林值 false 是否顯示專案導航 navigationPosition 字串 right 專案導航的位置，可選 left 或 right navigationColor 字串 #000 專案導航的顏色 navigationTooltips 陣列 空 專案導航的 tip slidesNavigation 布林值 false 是否顯示左右滑塊的專案導航 slidesNavPosition 字串 bottom 左右滑塊的專案導航的位置，可選 top 或 bottom controlArrowColor 字串 #fff 左右滑塊的箭頭的背景顏色 loopBottom 布林值 false 滾動到最底部後是否滾回頂部 loopTop 布林值 false 滾動到最頂部後是否滾底部 loopHorizontal 布林值 true 左右滑塊是否迴圈滑動 autoScrolling 布林值 true 是否使用外掛的滾動方式，如果選擇 false，則會出現瀏覽器自帶的滾動條 scrollOverflow 布林值 false 內容超過滿屏後是否顯示滾動條 css3 布林值 false 是否使用 CSS3 transforms 滾動 paddingTop 字串 0 與頂部的距離 paddingBottom 字串 0 與底部距離 fixedElements 字串 無 normalScrollElements 無 keyboardScrolling 布林值 true 是否使用鍵盤方向鍵導航 touchSensitivity 整數 5 continuousVertical 布林值 false 是否迴圈滾動，與 loopTop 及 loopBottom 不相容 animateAnchor 布林值 true normalScrollElementTouchThreshold 整數 5