Wordpressの投稿から投稿へのスクロールすべての投稿が表示されているページ

Question

私はTumblrのようなブログ機能を持っていて、画像に続いてdivにテキストが表示されています。これは、カスタムポストタイプがそうのように、ループを使用して含まれている限り多くの記事のために繰り返される：

<?php 

     // The Arguments 
     $args = array(
      'post_type' => 'strange', 
      'posts_per_page' =>-1, 
      'order_by' => 'menu_order' 

     ); 

     $c = 0; // this starts the count at the beginning 
     $class = ''; // standard is no class 

     // The Query 
     $the_query = new WP_Query($args); ?> 

     <?php 

     // If we have the posts... 
     if ($the_query->have_posts()) : ?> 

     <!-- Start the loop the loop --> 
      <?php while ($the_query->have_posts()) : $the_query->the_post(); 
      $c++; // this makes the loop count each post 
      if ($c == 1) $class .= ' current'; // if the item is the first item, add class current 
      else $class = ''; // if it's not the first item, don't add a class 
      ?> 

       <div id="strange-container" class="strange-container <?php echo $class; ?>">  

        <img src="<?php the_field('strange-img'); ?>" alt="<?php the_title(); ?>" /> 

        <span><?php the_field('strange-text'); ?></span> 

       </div> 

      <?php endwhile; endif; // end of the loop. ?> 

     <?php wp_reset_postdata(); ?> 

私は、ページ上部のナビゲーション矢印を持っています。クリックすると、ループ内のdivにユーザーをスクロールさせたい。ユーザーは既存のを介してすべての道をクリックすると

：

jQuery(document).ready(function($) { 
// Code that uses jQuery's $ can follow here. 


$('div.strange-container').first(); 

$('a.display').on('click', function(e) { 
e.preventDefault(); 

    var t = $(this).text(), 
    that = $(this); 

if (t === '↓' && $('.current').next('div.strange-container').length > 0) { 
    var $next = $('.current').next('.strange-container'); 
    var top = $next.offset().top; 

    $('.current').removeClass('current'); 

    $('html, body').animate({ 
     scrollTop: top  
    }, function() { 
      $next.addClass('current'); 
    }); // not using this portion for a previous button but left it in anyway just in case 
} else if (t === 'prev' && $('.current').prev('div.strange-container').length > 0) { 
    var $prev = $('.current').prev('.strange-container'); 
    var top = $prev.offset().top; 

    $('.current').removeClass('current'); 

    $('body').animate({ 
     scrollTop: top  
    }, function() { 
      $prev.addClass('current'); 
    }); 
} 
}); 

}); 

問題：あなたは、矢印をクリックすると、私はクラスを追加し、このjQueryのを使用してこの作業を持っている/それぞれのdivのクラスを削除しますページ上の投稿、矢印はリセットされず、ユーザーがページの先頭までスクロールしても機能しなくなります。これを達成する別の方法は、ユーザーが一度投稿をすべて通過した後、下矢印のナビゲーションを役に立たないようにするものではありませんか？

または、ユーザーがページの一番下までスクロール（またはすべての投稿をナビゲート）すると下矢印のナビゲーションを非表示にする方法はありますか？

Answer 1

は、適切な解決策を探して多くの時間後、私はこのスレッドにつまずい：Scroll to div on click, loop around at end

私はフィドルを変更し、それは私の目的のために完璧に動作します：

https://jsfiddle.net/9x335kzg/25/

var curr_el_index = 0; 
var els_length = $(".section").length; 

$('.btnNext').click(function() { 
    curr_el_index++; 
    if (curr_el_index >= els_length) curr_el_index = 0; 
$("html, body").animate({ 
    scrollTop: $(".section").eq(curr_el_index).offset().top - 20 
    }, 700); 
}); 

をユーザーがdivの最後までクリックしたときにこのスクリプトがどのようにループするかを誰かに教えてもらえない場合は、私が見つけたこの解決策についてもっと学ぶことに本当に感謝しています。