<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/jqueryui/1.11.1/jquery-ui.min.js"></script>

<link href="http://cdn.bootcss.com/fullPage.js/2.8.1/jquery.fullPage.min.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/fullPage.js/2.8.1/jquery.fullPage.min.js"></script>

<!--

<link href="http://cdn.bootcss.com/fullPage.js/2.8.1/jquery.fullPage.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/fullPage.js/2.8.1/jquery.fullPage.js"></script>

 -->

<style>

.section {text-align:center;font:50px "Microsoft Yahei";color:#fff;}

</style>

<script>

$(function(){

    $('#fullpage').fullpage({

        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],

        anchors: ['firstPage', 'secondPage', '3rdPage'],

        //menu: '#menu',

        loopTop: true

        //loopBottom: true

    });

});

</script>

<div id="fullpage">

    <div class="section " id="section0">

        <h1>fullPage.js</h1>

        <p>Looping Top and Bottom Enabled</p>

    </div>

    <div class="section" id="section1">

        <h1>Looping!</h1>

        <p>Go to the first section and scroll up or to the last one and scroll down to see how it works.</p>

    </div>

    <div class="section" id="section2">

        <h1>Scroll Down</h1>

        <p>And it will loop to the first section</p>

    </div>

</div>