title: show and hide previous and next button jQuery
body: <p><strong>Hello everybody,</strong> I've created four sections here. with the previous and next button you can scroll through the page. that works so far. Only the previous button in the 1 section and the next button in the 4 section do not make sense and should belong to be hidden and belong to be hidden if possible. can they be hidden in this section? or can I hide the last one or replace it with a to top?  please help me. Many Thanks. best regards</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>$(function(){
      
      var pagePositon = 0,
          sectionsSeclector = 'section',
          $scrollItems = $(sectionsSeclector),
          offsetTolorence = 30,
          pageMaxPosition = $scrollItems.length - 1;
      
      //Map the sections:
      $scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
  
      // Bind to scroll
      $(window).bind('scroll',upPos);
      
      //Move on click:
      $('#arrow a').click(function(e){
          if ($(this).hasClass('next') &amp;&amp; pagePositon+1 &lt;= pageMaxPosition) {
              pagePositon++;
              $('html, body').stop().animate({ 
                    scrollTop: $scrollItems.eq(pagePositon).offset().top
              }, 300);
          }
          if ($(this).hasClass('previous') &amp;&amp; pagePositon-1 &gt;= 0) {
              pagePositon--;
              $('html, body').stop().animate({ 
                    scrollTop: $scrollItems.eq(pagePositon).offset().top
                }, 300);
              return false;
          }
      });
      
      //Update position func:
      function upPos(){
         var fromTop = $(this).scrollTop();
         var $cur = null;
          $scrollItems.each(function(index,ele){
              if ($(ele).offset().top &lt; fromTop + offsetTolorence) $cur = $(ele);
          });
         if ($cur != null &amp;&amp; pagePositon != $cur.data('pos')) {
             pagePositon = $cur.data('pos');
         }                   
      }
      
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      height: 100%;
      margin: 0;
  }
  section {
      height: 100vh;
      font-size: 6em;
      font-weight: 800;
      text-align: center;
      padding-top: 10%;
  }
  section:nth-child(odd) {
      background: #0c1153;
      color: #bfc893;
  }
  section:nth-child(even) {
      background: #bfc893;
      color: #0c1153;
  }
  #arrow {
      position: fixed;
      margin: 0;
      bottom: 0;
      color: black;
  }
  .previous, .next {
      position: fixed;
      bottom: 6rem;
      width: 7rem;
      height: 7rem;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
      cursor: pointer;
      z-index: 2;
      text-align: center;
      font-size: 6rem;
      font-weight: 900;
      color: darkred;
  }
  .next {
      right: 6rem;
      writing-mode: vertical-lr;
  }
  .previous {
      left: 6rem;
      writing-mode: vertical-rl;
  }
  .previous a, .next a {
      vertical-align: middle
  }</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;section id="box1"&gt;1&lt;/section&gt;
  &lt;section id="box2"&gt;2&lt;/section&gt;
  &lt;section id="box3"&gt;3&lt;/section&gt;
  &lt;section id="box4"&gt;4&lt;/section&gt;
  &lt;div id="arrow"&gt; &lt;a class="previous"&gt;&lt;&lt;/a&gt; &lt;a class="next"&gt;&gt;&lt;/a&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>