title: jquery - How do I scrollTop animate to the next visibile div/class depending on my scroll position?
body: <p>Pardon me if the title is a bit vague, cause I wasn't sure how to write it down.</p>
  
  <p>basically:</p>
  
  <p>We have a page with 6 'scenes'. They all have the class <code>.scene</code> and a different ID, for example: <code>scene1</code>, <code>scene2</code> etc... </p>
  
  <p>at first, we had to dynamically change the color for each scene -> scene 1 is a light color, and the last scene is black. That works so far, even while adding or removing scenes.</p>
  
  <p>There is a <code>&lt;li&gt;</code> on the top and bottom of the page.  Which has a clickable <code>&lt;a&gt;</code> tag.</p>
  
  <p>When I press <code>nextButton</code>, I need to go to the next visibile scene <strong>depending on my position on the page</strong>. So if I scroll to scene 2, and I press the button, I need to go to scene 3. If I scroll to scene 5 and press the button, I need to go to scene 6, etcetera... Same counts for the other button <code>previousButton</code>, but the other way around (upwards). </p>
  
  <p>Also, if i reach the end of the page with <code>nextButton</code> (scene 6), it will go back up to scene 1. All done using <code>scrollTop</code></p>
  
  <p>I have been googling around in regards to this, but i cannot seem to figure out what to do exactly or how to start.</p>
  
  <p>the whole piece of code that is written undere <code>$(window).scroll(function)</code> 'till the <code>each()</code> function has been given to us by the tutor.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var brightness = 90 ;
  var $totalScenes = $('.scenes').length;
  
  
  $('.scenes').each(function() {
      $(this).css({"background-color" : "hsl(99, 100%, "+  brightness + "%"   + ")" });
  
      //je hebt 6 scenes en je wilt weten hoe groot de stappen zijn. vanaf de min bereken je hoe groot de stap is. dit doe je 1x (100/totalScenes - 1), dus van 100 naar nul in 5 stappen is 20. Dit herhaalt zich telkens.
      brightness = brightness - 100/($totalScenes - 1);
  
      console.log(brightness);
  
  });
  
  
  $(window).scroll(function() {
      // is in viewport function
      $.fn.isInViewport = function () {
          var elementTop = $(this).offset().top;
          var elementBottom = elementTop + $(this).outerHeight();
          var viewportTop = $(window).scrollTop();
          var viewportBottom = viewportTop + $(window).height();
  
          return elementBottom &gt; viewportTop &amp;&amp; elementTop &lt; viewportBottom;
      };
  
  
      $('.scenes').each(function(index) {
          if ($(this).isInViewport()) {
              console.log("dit is " + this.id);
  
              if(index &gt;= $totalScenes / 2) {
                  $('li').css({"color": "#fff"});
              }
                  else {
                       $('li').css({"color": "#000"});
                  }
              }
      });
  
  });
  
  
  $('#nextButton').click(function()  {
      $("html, body").animate({
          scrollTop: $(this).closest('.scenes').next().offset().top });     
  //          scrollTop: $(this).parent().next().find('.scenes').offset().top } , 100);
  });
  CSS</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      scroll-behavior: smooth;
      font-family: 'Roboto', sans-serif;
  }
  
  .scenes {
      height: 100vh;
      max-width: 100vw; 
  }
  
  h2 {
      text-align: center;
      font-size: 10vh;
      line-height: 100vh;
  }
  
  .circle{     
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      font-weight: bold;
      line-height: 150px;
      width: 150px;
      display: inline-block;
  }
  
  header {
      position: fixed;
      width: 100vw;
      height: 100vh;
  }
  
  
  li {
      font-weight: bold;
      font-size: 1.4em; 
      position: absolute;
  }
  
  li a{
      cursor: pointer;
      text-align: center;
  
  }
  
  #previous {
      top: 20px;
      left: 50vw;
      transform: translate(-50%, 0);
  }
  
  #next {
      bottom: 20px;
      left: 50vw;
      transform: translate(-50%, 0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
     &lt;?php include 'template-parts/head.php'; ?&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;header&gt;
  
      &lt;ul&gt;
          &lt;li id="previous"&gt;&lt;a id="previousButton" href="#"&gt;prev &amp;#8593;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="next"&gt;&lt;a id="nextButton" href="#"&gt;next &amp;#8595;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/header&gt;  
  
  &lt;main&gt;
  
      &lt;div id="wrapper"&gt;    
          &lt;div id="scene1" class="scenes"&gt;
              &lt;h2&gt;&lt;span class="circle"&gt;1&lt;/span&gt;&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div id="scene2" class="scenes"&gt;
              &lt;h2&gt;&lt;span class="circle"&gt;2&lt;/span&gt;&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div id="scene3" class="scenes"&gt;
              &lt;h2&gt;&lt;span class="circle"&gt;3&lt;/span&gt;&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div id="scene4" class="scenes"&gt;
              &lt;h2&gt;&lt;span class="circle"&gt;4&lt;/span&gt;&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div id="scene5" class="scenes"&gt;
              &lt;h2&gt;&lt;span class="circle"&gt;5&lt;/span&gt;&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div id="scene6" class="scenes"&gt;
              &lt;h2&gt;&lt;span class="circle"&gt;6&lt;/span&gt;&lt;/h2&gt;
          &lt;/div&gt;    
  
      &lt;/div&gt;
  
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>