效果可看：fullPage.js官網(wǎng)

1.添加布局、樣式和引入jquery

<style>
* {    
    margin: 0;    
    padding: 0;   
    box-sizing: border-box;
}
html, body {    
    /*隱藏滾動條*/
    overflow: hidden;
}
html, body, #fullpage, .section {    
    height: 100%;    
    width: 100%;
}
.sectionOne {    
    background-color: #8bff73;
}
.sectionTwo {    
    background-color: #f2787b;
}
.sectionThree {    
    background-color: #8a88ff;
}
</style>
<div id="fullpage">    
  <div class="section sectionOne"></div>    
  <div class="section sectionTwo"></div>    
  <div class="section sectionThree"></div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>

2.鼠標(biāo)滾動事件

<script>    
    //section每個page區(qū)域    
    //當(dāng)前section位置    
    var sectionIndex = 0;    
    //section數(shù)量    
    var sectionNum = 3;    
    //section滾動時間(ms)    
    var scrollDuration = 700;    
    //是否在滾動中    
    var scrolling = false;    
    //添加鼠標(biāo)滾動監(jiān)聽    
    $("#fullpage").bind("mousewheel", function (event) {
        //若在滾動中，則返回        
        if (scrolling) return;        
        scrolling = true;        
        if (event.originalEvent.wheelDelta < 0) {            
            //滾輪向下滾動殴俱，頁面向上滾動        
            scrollUp();    
        } else {            
            //滾輪向上滾動，頁面向下滾動    
            scrollDown();
        }    
    });    
    //頁面向下滾動
    function scrollDown() {
        //section位置往上精算，若在最前則不滾動，使?jié)L動狀態(tài)為非滾動中;否則進(jìn)行頁面滾動        
        if (--sectionIndex < 0) {            
            sectionIndex++;            
            scrolling = false;        
        } else {            
            scrollPage();        
        }    
    }    
    //頁面向上滾動
    function scrollUp() {   
        //section位置往下碎连，若在最后則不滾動灰羽，使?jié)L動狀態(tài)為非滾動中;否則進(jìn)行頁面滾動        
        if (++sectionIndex >= sectionNum) {            
            sectionIndex--;            
            scrolling = false;        
        } else {            
            scrollPage();        
        }    
    }    
    //頁面滾動    
    function scrollPage() {        
        //獲取窗口的高度，計算滾動到對應(yīng)section的高度        
        var scrollHeight = $(window).height() * sectionIndex;        
        //通過css3動畫進(jìn)行滾動        
        $("#fullpage").css({            
            "transition-duration": scrollDuration + "ms",            
            "transform": "translate3d(0px,-" + scrollHeight + "px,0px)"        
        });        
        //設(shè)置等待動畫完成后鱼辙，設(shè)置滾動狀態(tài)為非滾動中
        setTimeout(function () {            
            scrolling = false;        
        }, scrollDuration);    
    }
</script>

3.處理移動端

<!--禁止縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
<!--touchSwipe插件廉嚼，處理觸摸滑動事件，在jQuery之后引入-->
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script>
//禁止拖動頁面
document.ontouchmove = function (e) {    
    e.preventDefault();
}
//添加觸摸滑動監(jiān)聽
$("#fullpage").swipe({    
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) {        
        if (scrolling) return;        
        scrolling = true;        
        if (direction == "up") {            
            //滑動方向向上倒戏，頁面向上滾動            
            scrollUp();        
        } else {            
            //滑動方向向下怠噪，頁面向下滾動            
            scrollDown();        
        }    
    }
});
</script>

5.識別訪問瀏覽器，設(shè)置只有手機(jī)端才可進(jìn)行觸摸滑動

var browser = {    
    versions: function () {        
        var u = navigator.userAgent, app = navigator.appVersion;        
        return {            
            //移動終端瀏覽器版本信息            
            trident: u.indexOf('Trident') > -1, //IE內(nèi)核            
            presto: u.indexOf('Presto') > -1, //opera內(nèi)核            
            webKit: u.indexOf('AppleWebKit') > -1, //蘋果杜跷、谷歌內(nèi)核            
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核            
            mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否為移動終端            
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端            
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器            
            iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否為iPhone或者QQHD瀏覽器            
            iPad: u.indexOf('iPad') > -1, //是否iPad            
            webApp: u.indexOf('Safari') == -1 //是否web應(yīng)該程序傍念，沒有頭部與底部        
        };    
    }(),    
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.android || browser.versions.iPhone || browser.versions.iPad) {
//設(shè)置移動端處理矫夷，即第四點JavaScript代碼
}