如何正確使用fullpage.js onLeave（）函數？

Question

我想讓用戶向下滾動4個部分。當到達第四部分時，用戶再次向下滾動，而不是滾動到第i部分，視圖應該再次跳到第一部分。 （有一個FITH部分;它不過只包含印記，這是訪問的除外。）

這是我的代碼：

$('#fullpage').fullpage({ 
    onLeave: function(index, nextIndex, direction){ 
     if(nextIndex == 5){ 
      $.fn.fullpage.moveTo(1); 
     } 
    } 
}); 

它被放置在第四部分中的腳本（是，正確的地方？移動它並沒有任何效果，但...）。

會發生什麼情況，是：

• 沒有辦法去第5節了

• 滾動到可能的其他部分，但它們無法訪問通過他們的錨

我在做什麼錯？

Answer 1

你在正確的道路上，你只需要在moveTo指令後面加上return false;即可。這樣做會終止下一個滾動動作並允許moveTo生效。

$('#fullpage').fullpage({ 
 
    anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'], 
 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6', 'blue', 'green'], 
 
    onLeave: function(index, nextIndex, direction) { 
 
    $('#ind').text("nextIndex = " + nextIndex); 
 
    if (nextIndex > 4 && direction === 'down') { 
 
     $.fn.fullpage.moveTo('page1'); 
 
     return false; 
 
    } 
 
    } 
 
}); 
 

 
//adding the action to the button 
 
$(document).on('click', '#moveTo', function() { 
 
    $.fn.fullpage.moveTo(2, 1); 
 
});

.section { 
 
    text-align: center; 
 
    font-size: 3em; 
 
} 
 
/** 
 
Fixed button outside the fullpage.js wrapper 
 
*/ 
 

 
#moveTo { 
 
    top: 20px; 
 
    left: 20px; 
 
    position: fixed; 
 
    z-index: 999; 
 
    background: #09f; 
 
    font-size: 1em; 
 
    cursor: pointer; 
 
} 
 
#ind { 
 
    top: 40px; 
 
    left: 20px; 
 
    position: fixed; 
 
    z-index: 999; 
 
    font-size: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script> 
 

 
<div id="moveTo">Move to page2 slide 2</div> 
 
<div id="ind"></div> 
 

 
<div id="fullpage"> 
 
    <div class="section">One</div> 
 
    <div class="section"> 
 
    <div class="slide" data-anchor="slide1">Two 1</div> 
 
    <div class="slide" data-anchor="slide2">Two 2</div> 
 
    </div> 
 
    <div class="section">Three</div> 
 
    <div class="section">Four</div> 
 
    <div class="section">Five</div> 
 
    <div class="section">Six</div> 
 
</div>

Answer 2

這個答案在fullpage.js github issues forum

得到了解決，我從它粘貼：

---

我明白你的意思，但實際上是不因爲工作2.7.9。

下面是暫時的解決方案：

http://jsfiddle.net/97tbk/1292/

//IE < 10 pollify for requestAnimationFrame 
window.requestAnimFrame = function(){ 
    return window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.oRequestAnimationFrame || 
     window.msRequestAnimationFrame || 
     function(callback){ callback() } 
}(); 


$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    onLeave: function(index, nextIndex, direction) { 
     var leavingSection = $(this); 
     requestAnimFrame(function(){ 
      if (index == 2 && direction == 'down') { 
       $.fn.fullpage.moveTo(4); 
      } 
     }); 
    } 
});