title: How am I able to add further elements into my scrollY function?
body: <p>I'm trying to write a function that smooth scrolls up &amp; down between sections of my website.</p>
  <p><a href="https://stackoverflow.com/a/62392010/19151236">I found one answer on here which worked absolutely perfectly</a></p>
  <p>Unfortunately, I am really struggling to add more than just two &quot;elements&quot;.</p>
  <p>I attempted to insert an &quot;else if&quot; statement, but that just broke the code.</p>
  <p>Right now, it's safe to say, I have no idea how to solve this issue.</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 firstsec = document.getElementById('one');
  var secondsec = document.getElementById('two');
  var lastScrollTop = 0;
  window.onscroll = function(){
     var st = window.scrollY || document.documentElement.scrollTop; 
     if (st &gt; lastScrollTop){
        secondsec.scrollIntoView({behavior: "smooth"});
     } else {
        firstsec.scrollIntoView({behavior: "smooth"});
     }
     lastScrollTop = st &lt;= 0 ? 0 : st; 
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: sans-serif;
  }
  
  .container {
      height: 100vh;
  }
  
  section {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
  }
  
  #one {
      background: rgb(36, 164, 138);
  }
  
  #two {
          background: rgb(211, 79, 79);
  }
  
  #three {
          background: rgb(67, 91, 175);
  }
  
  #four {
          background: lightsalmon;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
     
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;section id="one"&gt;
              &lt;h1&gt;First Page&lt;/h1&gt;
          &lt;/section&gt;
          &lt;section id="two"&gt;
              &lt;h1&gt;Second Page&lt;/h1&gt;
          &lt;/section&gt;
          &lt;section id="three"&gt;
              &lt;h1&gt;Third Page&lt;/h1&gt;
          &lt;/section&gt;
          &lt;section id="four"&gt;
              &lt;h1&gt;Fourth Page&lt;/h1&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>