想要實現fullpage全屏滾動，需要以下幾步：
第一步：引入樣式文件以及js文件
<link rel="stylesheet" href="style/jquery.fullPage.css"/>
<link rel="stylesheet" href="style/style.css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.fullPage.min.js" type="text/javascript"></script>我自己寫的style樣式表爲
*{ margin:0; padding:0;}
ol, ul { list-style:none; }
a { text-decoration:none;color: #000; }
a:hover {}
img{border:0;display: block;}
body{font-family: '微軟雅黑', Arial; }
.clear{ clear: both;}
.blank10{ height: 10px;width: 100%;}
.blank20{ height: 20px;width: 100%;}
.blank30{ height: 30px;width: 100%;}
.index_body{width:100%;height:100%;overflow: hidden;}
.wrap{width:1150px;margin:0 auto;height:100%;}
.section { position: relative; overflow: hidden;}
/*header_top*/
.header_top{ background: #f48472;height: 62px;width: 100%;position: absolute;left: 0;top: 0;z-index: 99;}
/*section1*/
.container_01{ height: 100%;background: #5dc6ed;}
/*section2*/
.container_02{ height: 100%;background: #14afcb;}
/*section3*/
.container_03{ height: 100%;background: #74ddcd;}
/*section4*/
.container_04{ height: 100%;background: #167b87;}
第二步：編寫html
<body>
<div class="index_body">
<div class="header_top"></div>
<div id="fullpage">
<div class="section section1">
<div class="container_01">
<div class="wrap"></div>
</div>
</div><!--section1-->
<div class="section section2">
<div class="container_02">
<div class="wrap"></div>
</div>
</div><!--section2-->
<div class="section section3">
<div class="container_03">
<div class="wrap"></div>
</div>
</div><!--section3-->
<div class="section section4">
<div class="container_04">
<div class="wrap"></div>
</div>
</div><!--section4-->
</div>
</div>
</body>第三步：編寫js命令
<script type="text/javascript">
$(function () {
if ($.browser.msie && $.browser.version < 10) {
$('body').addClass('ltie10');
}
$("#fullpage").fullpage({
verticalCentered: false,
anchors: ['section1', 'section2', 'section3', 'section4', 'section5', 'section6'],
navigation: true,
navigationTooltips: ['', '', '', '', '', '']
});
});
</script>navigationTooltips: ['', '', '', '', '', '']