Scrollen von Post zu Post in Wordpress-Schleife auf Seite mit allen Posts angezeigt

Question

Ich habe eine Tumblr-ähnliche Blog-Funktion, die ein Bild gefolgt von etwas Text in einem div. Dies wird für so viele Beiträge als die benutzerdefinierte post-Typ wiederholt enthält eine Schleife, etwa 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(); ?> 

Ich habe einen Navigationspfeil am oberen Rand der Seite. Beim Klicken möchte ich, dass der Benutzer zum div in der Schleife blättert. Ich habe diese Arbeit dieses jQuery verwenden, die eine Klasse fügt/entfernt eine Klasse von jedem div wie Sie auf den Pfeil klicken:

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

}); 

Das Problem:

Sobald der Benutzer den ganzen Weg durch die bestehende klickt Posts auf der Seite, der Pfeil wird nicht zurückgesetzt und funktioniert nicht mehr, selbst wenn der Benutzer zurück zum Anfang der Seite scrollt. Gibt es einen anderen Weg, dies zu erreichen, der die Abwärtspfeil-Navigation nicht nutzlos machen würde, nachdem der Benutzer einmal durch die Beiträge gegangen ist?

Oder gibt es eine Möglichkeit, die Abwärtspfeil-Navigation zu verbergen, wenn der Benutzer zum Ende der Seite gescrollt ist (oder durch alle Beiträge navigiert ist)?

Answer 1

Nach vielen Stunden für eine angemessene Lösung suchen, stieß ich auf diesen Thread: Scroll to div on click, loop around at end

ich die Geige geändert, und es funktioniert perfekt für meine Zwecke:

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

Wenn es jemandem nichts ausmacht, mir zu erklären, wie dieses Skript die Schleife erzwingt, wenn der Benutzer bis zum Ende der divs klickt, würde ich es wirklich schätzen, mehr über diese Lösung zu erfahren, über die ich gestolpert bin.