fullpage.js教程（二）

做全屏滾動網頁，實現滾動效果后，首先想到的就是網頁右邊的導航欄，要實現這個導航欄，fullpage.js插件本身就自帶配置項，只要會使用就可以實現效果了。

先介紹幾個api：

• anchors：定義錨鏈接，默認值為[]，有了錨鏈接，就可以快速的打開定位到某一頁面，也是我們實現導航欄的關鍵；
• lockAnchors：是否鎖定錨鏈接，默認為false，如果設定為true，定義的錨鏈接，也就是anchors屬性就沒有效果了；
• menu：綁定菜單，設定相關屬性與anchors的值相對應后，菜單可以控制滾動，默認為false；
• navigation：是否顯示導航，默認為false，如果設置為true，會顯示小圓點，作為導航；
• navigationPostion：導航小圓點的位置，可以設置為left或right；
• navigationTooltips：導航小圓點的tooltips的設置，默認為[]，注意按照順序設置。

使用fullpage.js插件默認自帶的導航欄： 

<script>
　　$(function(){  3 　　　　$('#gufeibai').fullpage({  4 　　　　　　anchors : ['page1','page2','page3','page4']，  5 　　　　　　navigation：true，  6 　　　　　　navigationPostion：right，  7 　　　　　　navigationTooltips：['page1','page2','page3','page4']  //設置它的提示
　　　　});  9 　　}); 10 </script>

 

設置完成就可以查看效果了，如果不想用fullpage.js默認的樣式效果，還可以自定義樣式。

自定義導航欄

基本結構：

<div id="gufeibai">
　　<div class="section">第一屏</div>
　　<div class="section">第二屏</div>
　　<div class="section">第三屏</div>
</div>
<ul id="fp-nav">
　　<li data-menuanchors='page1'><a href="#page1">1</a></li>
　　<li data-menuanchors='page2'><a href="#page2">2</a></li>
　　<li data-menuanchors='page3'><a href="#page3">3</a></li>
</ul>

實現效果:

<script>
　　$(function(){ 3 　　　　$('#gufeibai').fullpage({ 4 　　　　　　anchors : ['page1','page2','page3','page4']， 5 　　　　　　menu : '#fp-nav'
　　　　}); 7 　　}); 8 </script>