實(shí)例地址：http://kagomejuice.com.cn/health.html
可以實(shí)現(xiàn)上圖的滾動(dòng)效果场仲，附贈(zèng)插件GITHUB：https://github.com/alvarotrigo/fullPage.js/
詳細(xì)的使用方法是：
1 首先引用CSS南窗、JS撵渡、和JQUERY:
<link rel="styleshee" type="text/css" href="css/jquery.fullPage.css">
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
2 HTML文檔內(nèi)容：
<div id="fullpage">
<div id="p1" class="section active"></div>
<div id="p2" class="section"></div>
<div id="p3" class="section"></div>
</div>
fullpage是整個(gè)頁(yè)面的元件，p1~p3是滾動(dòng)的每一頁(yè)颊咬，用class="section"定義务甥，active是默認(rèn)選中的頁(yè)。
3 在文檔加載完后調(diào)用fullpage功能
$(document).ready(function(){
$('#fullpage').fullpage({
afterLoad: scrollLoad,
onLeave: scrollLeave,
navigation: true
});
});
其中afterLoad是某一頁(yè)加載后的回調(diào)函數(shù)喳篇，onLeave是某一頁(yè)移出時(shí)的回調(diào)函數(shù)敞临，navigation: true是使用導(dǎo)航點(diǎn)。更多的參數(shù)和功能見(jiàn)GITHUB杭隙。
那么哟绊，問(wèn)題來(lái)了。
這個(gè)頁(yè)面需要適配手機(jī)版痰憎，我在分辨率改變到手機(jī)版尺寸的時(shí)候調(diào)用取消滾動(dòng)票髓，分辨率改變到桌面版尺寸的時(shí)候調(diào)用頁(yè)面滾動(dòng)的功能。正常來(lái)說(shuō)是調(diào)用$.fn.fullpage.xxxx來(lái)使用铣耘，但是在MAC SAFARI上頁(yè)面加載完過(guò)后洽沟，偶爾會(huì)出現(xiàn)$.fn.fullpage是空值（不是必現(xiàn)），就會(huì)出現(xiàn)分辨率改變的時(shí)候不能滾動(dòng)和頁(yè)面出錯(cuò)的問(wèn)題蜗细。
測(cè)試了好久裆操，都沒(méi)發(fā)現(xiàn)$.fn.fullpage到底為何會(huì)消失，但是頁(yè)面加載完調(diào)用fullpage的初始化都沒(méi)出現(xiàn)過(guò)問(wèn)題炉媒，就是頁(yè)面分辨率改變的時(shí)候出問(wèn)題踪区。好吧死馬當(dāng)活馬醫(yī)，在初始化的時(shí)候把$.fn.fullpage這東西用一個(gè)變量把他存起來(lái)吊骤，需要使用的時(shí)候再把值設(shè)回去……居然把問(wèn)題解決了缎岗。
雖然問(wèn)題是好了，但是沒(méi)搞明白原因心里真不爽啊白粉。
