在页面上的Wordpress循环中从一个帖子滚动到另一个帖子，并显示所有帖子

Question

I have a Tumblr-like blog feature that displays an image followed by some text in a div. This is repeated for as many posts as the the custom post-type contains using a loop, like so:

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

I have a navigation arrow at the top of the page. On click, I want it to scroll the user to the div in the loop. I have this working using this jQuery that adds a class/removes a class from each div as you click the arrow:

 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');
    });
 } 
 });

 }); 

The problem:

Once the user clicks all the way through the existing posts on the page, the arrow doesn't reset and no longer works, even if the user scrolls back up to the top of the page. Is there another way to accomplish this that wouldn't render the down-arrow navigation useless after the user has gone all the way through the posts once?

Or, is there a way to hide the down-arrow navigation once the user has scrolled to the bottom of the page (or navigated through all of the posts)?

Answer 1

After many hours of looking for an appropriate solution, I stumbled on this thread: Scroll to div on click, loop around at end

I modified the fiddle, and it works perfectly for my purposes:

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);
});

If someone wouldn't mind explaining to me how this script forces the looping when the user clicks to the end of the divs, I'd really appreciate learning more about this solution I stumbled upon.