javascript - 如何编写 FullPage.js 脚本？

Question

我正在使用 FullPage.js 进行全屏滚动。他们确实有一个名为“scrollOverflowReset”的付费扩展。用于scrollOverflowReset: true在离开部分或幻灯片后重置滚动条，并始终在部分加载时显示内容的开始。

我的问题是为此付费扩展，是否无法手动创建javascript代码以在看到div时滚动回顶部。

例如，这个 div 将允许向下滚动直到该部分完成，然后跳到下一个全屏部分。

如果我向上滚动到上一部分，我如何让它从内容的开头而不是向下滚动到的位置开始！

我试过这个并没有用：

var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

标签： javascript

Answer 1

FullPage.js 有许多你可以使用的回调。您可以使用 [ onLeave ] 回调1。

试试这个代码：

jQuery(document).ready(function() {
  jQuery('#fullpage').fullpage({
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'white', '#ccddff'],
    scrollOverflow: true,

    onLeave: function(origin, destination) {
      var iscroll = $('.fp-section.active').find('.fp-slide.active').find('.fp-scrollable').prop("fp_iscrollInstance");

      if (iscroll)
        iscroll.scrollTo(0, 0);
    }
  });


});

.section {
  position: relative;
}

.slide {
  font-size: 20px;
  padding: 5rem;
  line-height: 2rem;
  box-sizing: border-box;
}

body {
  margin: 0;
}

h1 {
  margin: 0;
  text-align: center;
  padding: 2rem;
  text-transform: uppercase;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://alvarotrigo.com/fullPage/vendors/scrolloverflow.min.js"></script>
<script src="https://raw.githack.com/alvarotrigo/fullPage.js/master/dist/fullpage.js"></script>


<div id="fullpage">
  <div class="section">
    <h1>Section</h1>
  </div>
  <div class="section">
    <h1>Section</h1>
  </div>
  <div class="section">
    <div class='slide'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate ut pharetra sit amet aliquam id diam maecenas. Et tortor at risus viverra adipiscing at. Nisi lacus sed viverra tellus
      in hac habitasse. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Elementum nibh tellus molestie nunc. Leo vel orci porta non pulvinar. Semper auctor neque vitae tempus quam pellentesque nec. Massa massa ultricies mi quis hendrerit
      dolor magna. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. Consequat nisl vel pretium lectus quam id. Augue neque gravida in fermentum et sollicitudin ac orci phasellus. Maecenas volutpat blandit aliquam etiam erat velit
      scelerisque. At elementum eu facilisis sed odio morbi. Ornare lectus sit amet est placerat in egestas erat. Mauris a diam maecenas sed enim ut. Elit ut aliquam purus sit amet luctus venenatis lectus. Purus in mollis nunc sed id. Amet nulla facilisi
      morbi tempus iaculis urna id volutpat. Nisi porta lorem mollis aliquam. Scelerisque varius morbi enim nunc. Integer malesuada nunc vel risus commodo viverra. Semper feugiat nibh sed pulvinar proin. Nec dui nunc mattis enim ut. Nisl condimentum id
      venenatis a condimentum vitae. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Amet porttitor eget dolor morbi non arcu risus quis. Massa eget egestas purus viverra accumsan.
      Purus in mollis nunc sed id. Aliquam sem fringilla ut morbi tincidunt augue interdum. Praesent semper feugiat nibh sed pulvinar. Vel pretium lectus quam id leo in vitae turpis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Ullamcorper
      eget nulla facilisi etiam dignissim diam quis enim lobortis. Turpis nunc eget lorem dolor sed. Nibh sit amet commodo nulla. Tristique risus nec feugiat in fermentum posuere urna. Egestas diam in arcu cursus euismod quis. Vel quam elementum pulvinar
      etiam non quam. Sit amet venenatis urna cursus eget nunc. A arcu cursus vitae congue. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Sagittis vitae et leo duis ut diam quam nulla porttitor. Lobortis mattis aliquam faucibus purus.
      Eu facilisis sed odio morbi quis commodo odio aenean sed. Nullam vehicula ipsum a arcu cursus vitae congue. Vestibulum sed arcu non odio euismod. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Pellentesque massa placerat duis
      ultricies lacus sed turpis tincidunt. Nunc sed id semper risus in hendrerit gravida rutrum. Ullamcorper dignissim cras tincidunt lobortis feugiat. Et tortor consequat id porta nibh venenatis cras sed felis. Cras fermentum odio eu feugiat. Est velit
      egestas dui id. Sapien et ligula ullamcorper malesuada proin. Quisque egestas diam in arcu cursus euismod. Vitae ultricies leo integer malesuada nunc vel. Nulla at volutpat diam ut venenatis. Tempus egestas sed sed risus pretium quam vulputate dignissim.
      Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Amet facilisis magna etiam tempor. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
      Nec dui nunc mattis enim ut tellus elementum. Aliquam ultrices sagittis orci a scelerisque purus semper eget. Aliquet nibh praesent tristique magna sit amet. Aliquet nibh praesent tristique magna sit amet. Enim facilisis gravida neque convallis
      a cras. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Vitae nunc sed velit dignissim sodales ut eu sem integer. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Scelerisque in dictum non consectetur a erat
      nam at. Semper feugiat nibh sed pulvinar proin. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Diam in arcu cursus euismod. Vel eros donec ac odio tempor orci dapibus ultrices in. In massa tempor nec feugiat. Massa massa
      ultricies mi quis hendrerit dolor. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. In nisl nisi scelerisque eu ultrices. Tellus elementum sagittis vitae et leo duis. Pharetra sit amet aliquam id diam maecenas ultricies mi eget.
      Vestibulum morbi blandit cursus risus at ultrices mi tempus. Rhoncus dolor purus non enim praesent. Magna fermentum iaculis eu non. Morbi tincidunt augue interdum velit euismod in pellentesque. Eu lobortis elementum nibh tellus molestie nunc non
      blandit. In vitae turpis massa sed elementum tempus egestas sed sed. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Nisl condimentum id venenatis a condimentum.
    </div>
  </div>
  <div class="section">
    <h1>Section</h1>
  </div>
  <div class="section">
    <h1>Section</h1>
  </div>
</div>