Scroll from post to post in WordPress loop on page with all posts displaying

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

Read more here: Scroll from post to post in WordPress loop on page with all posts displaying

Leave a Reply

Your email address will not be published. Required fields are marked *