显示和隐藏上一个和下一个按钮 jQuery

Question

大家好，我在这里创建了四个部分。使用上一个和下一个按钮，您可以滚动页面。到目前为止有效。只有第 1 部分中的上一个按钮和第 4 部分中的下一个按钮没有意义，应该属于隐藏，如果可能的话属于隐藏。他们可以隐藏在这个部分吗？或者我可以隐藏最后一个或将其替换为顶部？请帮我。非常感谢。最好的问候

$(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') && pagePositon+1 <= pageMaxPosition) {
            pagePositon++;
            $('html, body').stop().animate({ 
                  scrollTop: $scrollItems.eq(pagePositon).offset().top
            }, 300);
        }
        if ($(this).hasClass('previous') && pagePositon-1 >= 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 < fromTop + offsetTolorence) $cur = $(ele);
        });
       if ($cur != null && pagePositon != $cur.data('pos')) {
           pagePositon = $cur.data('pos');
       }                   
    }
    
});

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
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="box1">1</section>
<section id="box2">2</section>
<section id="box3">3</section>
<section id="box4">4</section>
<div id="arrow"> <a class="previous"><</a> <a class="next">></a> </div>

Answer 1

用这个怎么样：

if (pagePositon > 0)
   $(".previous").show();
else $(".previous").hide();

if (pagePositon < pageMaxPosition)
      $(".next").show();
else $(".next").hide();`

$(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);

  $(".previous").hide();
  //Move on click:
  $('#arrow a').click(function(e) {
    if ($(this).hasClass('next') && pagePositon + 1 <= pageMaxPosition) {
      pagePositon++;
      $('html, body').stop().animate({
        scrollTop: $scrollItems.eq(pagePositon).offset().top
      }, 300);
    }
    if ($(this).hasClass('previous') && pagePositon - 1 >= 0) {
      pagePositon--;
      $('html, body').stop().animate({
        scrollTop: $scrollItems.eq(pagePositon).offset().top
      }, 300);
    }

    if (pagePositon > 0)
      $(".previous").show();
    else $(".previous").hide();

    if (pagePositon < pageMaxPosition)
      $(".next").show();
    else $(".next").hide();
  });

  //Update position func:
  function upPos() {
    var fromTop = $(this).scrollTop();
    var $cur = null;
    $scrollItems.each(function(index, ele) {
      if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
    });
    if ($cur != null && pagePositon != $cur.data('pos')) {
      pagePositon = $cur.data('pos');
    }
  }

});

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
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="box1">1</section>
<section id="box2">2</section>
<section id="box3">3</section>
<section id="box4">4</section>
<div id="arrow">
  <a class="previous">
    <</a> <a class="next">></a> </div>

Answer 2

在upPos 函数中使用.toggle，在它的末尾：

    $('#arrow a.next').toggle(pagePositon < pageMaxPosition);
    $('#arrow a.previous').toggle(fromTop > 0);

Answer 3

hide next initially then after that check conditions on click if pagePositon ==0 then hide previous anf if pagePositon = pageMaxPosition then hide next -

$(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);
    $('.previous').hide();
    //Move on click:
    $('#arrow a').click(function(e){
        if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) {
            pagePositon++;
            $('html, body').stop().animate({ 
                  scrollTop: $scrollItems.eq(pagePositon).offset().top
            }, 300);
        }
        if ($(this).hasClass('previous') && pagePositon-1 >= 0) {
            pagePositon--;
            $('html, body').stop().animate({ 
                  scrollTop: $scrollItems.eq(pagePositon).offset().top
              }, 300);
        }
if(pagePositon ==0 )
$('.previous').hide();
else
$('.previous').show();

if(pagePositon == pageMaxPosition )
$('.next').hide();
else
$('.next').show();
    });
    
    //Update position func:
    function upPos(){
       var fromTop = $(this).scrollTop();
       var $cur = null;
        $scrollItems.each(function(index,ele){
            if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
        });
       if ($cur != null && pagePositon != $cur.data('pos')) {
           pagePositon = $cur.data('pos');
       }                   
    }
    
});

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
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="box1">1</section>
<section id="box2">2</section>
<section id="box3">3</section>
<section id="box4">4</section>
<div id="arrow"> <a class="previous"><</a> <a class="next">></a> </div>