如何正确使用fullpage.js onLeave（）函数？

Question

我想让用户向下滚动4个部分。当到达第四部分，并且用户再次向下滚动时，视图应该再次跳到第一部分而不是向下滚动到第一部分。 （有一个fith部分;但它只包含印记，否则可以访问。）

这是我的代码：

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

它被放置在第四部分的脚本中（是正确的地方？移动它没有任何影响，但是......）。

会发生什么，是：

• 没有办法再进入第5部分了
• 可以滚动到其他部分，但无法通过其锚点访问它们

我究竟做错了什么？

Answer 1

更新2019年：

fullPage.js版本3上不存在此问题：https://github.com/alvarotrigo/fullPage.js

老答案

这个答案在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);
            }
        });
    }
});

Answer 2

你是在正确的道路上，你只需要在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>