How to properly use fullpage.js onLeave() function?

Question

I'd like to have the user scroll down for 4 sections. When the fourth section is reached, and the user scrolls down again, instead of scrolling down to the fith section, the view should jump to the first section again. (There is a fith section; it however only contains the imprint, which is accessible otherwise.)

This is my code:

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

It is placed as a script within the fourth section (is that the right place? moving it around does not have any effect, though...).

What happens, is:

• there is no way to get to the 5th section anymore

• scrolling to the other sections is possible, but they are not reachable via their anchors

What am I doing wrong?

Answer 1

Update 2019:

This issue doesn't exist on fullPage.js version 3: https://github.com/alvarotrigo/fullPage.js

Old answer

This answer was resolved in the fullpage.js github issues forum

I paste from it:

---

I see what you mean now, but actually that is not working since 2.7.9.

Here's a solution for the moment:

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);
            }
        });
    }
});

Answer 2

You're on the right path, you just need to add a return false; after the moveTo instruction. Doing this will terminate the next scrolldown action and allow the moveTo to take effect.

$('#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>