Проблемы с AJAX подгрузкой постов WP

Суть проблемы - во всех браузерах кнопка показать еще отрабатывает корректно , но в Google Chrome посты грузятся "поверх" кнопки, то есть они грузятся вне экрана вверху и приходится листать до них. Вот код

<a id="my-repeater-show-more-link" class="btn btn-site-v1" onclick="javascript: my_repeater_show_more();" href="#no_scroll" <?php
                if ($total < $count) {
                    ?> style="display: none;"<?php
                }
                ?>>Показать ещё (<?php echo floor($total / 6); ?>)</a>
                <script type="text/javascript">
                    var my_repeater_total = <?php echo $total; ?>;
                    var total_pages = Math.floor(parseInt(my_repeater_total / 6));
                    var my_repeater_field_post_id = <?php echo $post->ID; ?>;
                    var my_repeater_field_offset = <?php echo $number; ?>;
                    var my_repeater_field_nonce = '<?php echo wp_create_nonce('my_repeater_field_nonce'); ?>';
                    var my_repeater_ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
                    var my_repeater_more = true;
                    function my_repeater_show_more() {
                                    // make ajax request
                                    jQuery.post(
                                        my_repeater_ajax_url, {
                                            'action': 'my_repeater_show_more',
                                            'post_id': my_repeater_field_post_id,
                                            'offset': my_repeater_field_offset,
                                            'nonce': my_repeater_field_nonce
                                        },
                                        function (json) {
                                            res = parseInt(my_repeater_total - my_repeater_field_offset);
                                            current_page = Math.floor(parseInt(res / 6));
                                            jQuery('#my-repeater-show-more-link').text('Показать еще ('+ current_page + ')');
                                            jQuery('.products_ajax').append(json['content']);
                                            my_repeater_field_offset = json['offset'];
                                            if (!json['more']) {
                                                jQuery('#my-repeater-show-more-link').css('display', 'none');
                                            }
                                        },
                                        'json'
                                        );
                                
                                }
                            </script>

это собственно сама страница и вот что в functions.php

function my_repeater_show_more() {

if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'my_repeater_field_nonce')) {
    exit;
}
if (!isset($_POST['post_id']) || !isset($_POST['offset'])) {
    return;
}
$show = 6;
$start = $_POST['offset'];
$end = $start+$show;
$post_id = $_POST['post_id'];
ob_start();
if (have_rows('products_loop', $post_id)) {
    $total = count(get_field('products_loop', $post_id));
    $count = 0;
    while (have_rows('products_loop', $post_id)) {
        the_row();
        if ($count < $start) {
            $count++;
            continue;
        }
        // vars
        $photo = get_sub_field('photo');
        $title = get_sub_field('title');
        $text = get_sub_field('text');
        $cost = get_sub_field('cost');
        $desc = get_sub_field('text_b');
        $images = get_sub_field('images');
        ?>

            <div class="col-18 col-md-9 col-lg-6 margin-fix">
                <div class="card card-product">
                    <a class="link" href="#">
                        <img class="card-img-top" src="<?php echo $photo['sizes']['procuct-thumb']; ?>" data-full="<?php echo $photo['url']; ?>" alt="<?php echo $title;?>">
                    </a>
                    <div class="card-body">
                        <h4 class="card-title"><a href="#" class="link"><?php echo $title;?></a></h4>
                    </div>
                    <div class="card-footer">
                        <div class="row align-items-center justify-content-between flex-nowrap">
                            <div class="col-auto">
                                <p class="price mb-0"><?php echo $cost;?> ₽</p>
                            </div>
                            <div class="col-9">
                                <div class="btn-wrap">
                                    <a href="#" class="btn btn-site-v1 ">Купить</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="product-info" style="display: none !important; visibility: hidden;">
                        <div class="card-text"><?php echo $text;?></div>
                        <div class="desc"><?php echo $desc;?></div>
                        <?php if( $images ): ?>
                            <?php $i_count = 0; ?>
                            <?php $i_count_b = 0; ?>
                            <div class="gallery-wrap">
                                <div class="main-image">
                                    <?php foreach( $images as $image ): ?>
                                        <a href="<?php echo $image['url'];?>" data-view="<?php echo $i_count;?>" style="<?php if ($i_count >= 1) echo 'display: none;';?>">
                                            <img src="<?php echo $image['sizes']['procuct-thumb']; ?>" alt="<?php echo $image['alt']; ?>">
                                        </a>
                                        <?php $i_count++;?>
                                    <?php endforeach;?>
                                </div>
                                <ul>
                                    <?php foreach( $images as $image ): ?>
                                        <li>
                                            <a class="img-get" href="#" data-src='<?php echo $i_count_b;?>'>
                                                 <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>">
                                            </a>
                                        </li>
                                        <?php $i_count_b++;?>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php endif; ?>
                    </div>
                </div> <!-- .card-product -->
            </div>
        <?php
        $count++;
        if ($count == $end) {
            break;
        }
    }
}
$content = ob_get_clean();
$more = false;
if ($total > $count) {
    $more = true;
}
echo json_encode(array('content' => $content, 'more' => $more, 'offset' => $end));
exit;

}

Подскажите как реализовать всё таки прогрузку контента , что бы кнопка "Показать еще" уезжала вниз а не посты прыгали вверх в Google chrome


Ответы (0 шт):