Как правильно использовать функцию fullpage.js onLeave()?

Question

Я бы хотел, чтобы пользователь прокрутил вниз 4 раздела. Когда четвертая секция будет достигнута, и пользователь снова прокрутится вниз, вместо прокрутки вниз до секции fith, вид должен снова перейти к первой секции. (Существует FITH раздел, он, однако, только содержит отпечаток, который доступен в противном случае.)

Это мой код:

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

Он помещается в качестве сценария в четвертой секции (в том, что правильное место? перемещение вокруг не имеет никакого эффекта, хотя ...).

Что происходит, является:

• нет никакого способа, чтобы добраться до 5-го раздела больше

• прокрутки в других разделы можно, но они не доступны через якоря

Что я делаю неправильно?

Answer 1

Вы на правильном пути, вам нужно просто добавить return false; после инструкции moveTo. Выполнение этого приведет к прекращению действия следующего прокрутки и позволит использовать 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); 
      } 
     }); 
    } 
});