从帖子到帖子在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的末尾，我真的很感激更多地了解我偶然发现的这个解决方案。