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

【问题标题】：Scroll from post to post in Wordpress loop on page with all posts displaying在页面上的 Wordpress 循环中从一个帖子滚动到另一个帖子，并显示所有帖子
【发布时间】：2017-09-17 21:43:05
【问题描述】：

我有一个类似于 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 进行这项工作，当您单击箭头时，它会从每个 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');
    });
 } 
 });

 });

问题：

一旦用户一直点击页面上的现有帖子，即使用户向上滚动到页面顶部，箭头也不会重置并且不再起作用。是否有另一种方法可以在用户浏览完帖子一次后不会使向下箭头导航变得无用？

或者，一旦用户滚动到页面底部（或浏览所有帖子），有没有办法隐藏向下箭头导航？

【问题讨论】：

当我使用这个脚本到达窗口底部时，我也可以隐藏箭头，但这与到达屏幕底部后持续隐藏它不同：$ (document).ready(function(){ var top=0; $(window).scroll(function(){ var st=$(this).scrollTop(); if($(window).scrollTop() + window .innerHeight == $(document).height()){ $("#strange-arrow").css("display","none"); }else{ $("#strange-arrow").css( "显示","块"); } }); });

标签： javascript jquery css wordpress navigation

【解决方案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 的末尾时这个脚本是如何强制循环的，我真的很感激能更多地了解我偶然发现的这个解决方案。

【讨论】：