效果可看：fullPage.js官网

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.鼠标滚动事件

<script>    
    //section每个page区域    
    //当前section位置    
    var sectionIndex = 0;    
    //section数量    
    var sectionNum = 3;    
    //section滚动时间(ms)    
    var scrollDuration = 700;    
    //是否在滚动中    
    var scrolling = false;    
    //添加鼠标滚动监听    
    $("#fullpage").bind("mousewheel", function (event) {
        //若在滚动中，则返回        
        if (scrolling) return;        
        scrolling = true;        
        if (event.originalEvent.wheelDelta < 0) {            
            //滚轮向下滚动，页面向上滚动        
            scrollUp();    
        } else {            
            //滚轮向上滚动，页面向下滚动    
            scrollDown();
        }    
    });    
    //页面向下滚动
    function scrollDown() {
        //section位置往上，若在最前则不滚动，使滚动状态为非滚动中;否则进行页面滚动        
        if (--sectionIndex < 0) {            
            sectionIndex++;            
            scrolling = false;        
        } else {            
            scrollPage();        
        }    
    }    
    //页面向上滚动
    function scrollUp() {   
        //section位置往下，若在最后则不滚动，使滚动状态为非滚动中;否则进行页面滚动        
        if (++sectionIndex >= sectionNum) {            
            sectionIndex--;            
            scrolling = false;        
        } else {            
            scrollPage();        
        }    
    }    
    //页面滚动    
    function scrollPage() {        
        //获取窗口的高度，计算滚动到对应section的高度        
        var scrollHeight = $(window).height() * sectionIndex;        
        //通过css3动画进行滚动        
        $("#fullpage").css({            
            "transition-duration": scrollDuration + "ms",            
            "transform": "translate3d(0px,-" + scrollHeight + "px,0px)"        
        });        
        //设置等待动画完成后，设置滚动状态为非滚动中
        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();
}
//添加触摸滑动监听
$("#fullpage").swipe({    
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) {        
        if (scrolling) return;        
        scrolling = true;        
        if (direction == "up") {            
            //滑动方向向上，页面向上滚动            
            scrollUp();        
        } else {            
            //滑动方向向下，页面向下滚动            
            scrollDown();        
        }    
    }
});
</script>

5.识别访问浏览器，设置只有手机端才可进行触摸滑动

var browser = {    
    versions: function () {        
        var u = navigator.userAgent, app = navigator.appVersion;        
        return {            
            //移动终端浏览器版本信息            
            trident: u.indexOf('Trident') > -1, //IE内核            
            presto: u.indexOf('Presto') > -1, //opera内核            
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核            
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核            
            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应该程序，没有头部与底部        
        };    
    }(),    
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.android || browser.versions.iPhone || browser.versions.iPad) {
//设置移动端处理，即第四点JavaScript代码
}