Как добавить «эффект прокрутки» в код PHP?

Question

СИТУАЦИЯ: У меня есть полностью работающий модуль PHP, функция которого состоит в том, чтобы фильтровать категории продуктов и показывать пользователям только релевантные результаты. Для справки, на странице 50 категорий, вместо прокрутки вниз, просматривая каждую из них, пользователь может отфильтровать только ту, которую он хочет просмотреть.

Это очень хороший пример сайта, который предлагает такую ​​функциональность: https://saijogeorge.com/best-marketing-tools/ - так как вы можете видеть, что есть много категорий, но при нажатии на одну категорию категория не только фильтруетсяно также страница автоматически прокручивается.

ПРОБЛЕМА: Проблема с моим модулем состоит в том, что после нажатия на соответствующие категории модуль не прокручивает к фактическим результатам, а скореепросто показывает их в блоке прямо под фильтром. Тем не менее, я хочу убедиться, что реальная страница браузера автоматически прокручивается до выбранной категории сразу после того, как пользователь отфильтрует категорию.

Эксперты, может кто-нибудь просмотреть прилагаемый код PHP и посмотреть, как можноЯ реализую эффект прокрутки.

Присоединение кода моего модуля:

                    <?php 
                    $item_count_disp_all = 0;
                    foreach ($listItems as $item){
                        if( $item_count == "on" ){
                            @$item_count_disp_all += count(get_post_meta( $item->ID, 'qcopd_list_item01' ));
                        }
                    }
                ?>
                <a href="#" class="categoryfilter-btn categoryfilter-active" data-categoryfilter="all">
                    <?php 
                        if(testmodule_get_option('testmodule_lan_show_all')!=''){
                            echo esc_html(testmodule_get_option('testmodule_lan_show_all'));
                        }else{
                            _e('Show All', 'qc-opd'); 
                        }
                    ?>
                    <?php
                        if($item_count == 'on' and $infinityscroll!=1){
                            echo '<span class="opd-item-count-fil">('.esc_html($item_count_disp_all).')</span>';
                        }
                    ?>
                </a>

Answer 1

Я проанализировал страницу, на которую вы ссылались с Firefox Inspect Element, и сразу заметил, что есть событие jQuery, связанное с щелчком каждого элемента div, представляющего категорию. В частности, событие вызывает следующее событие:

function() {
  $(".listsInfo").hide();
  $(".listWindow").hide();
  $(".listWindow#" + $(this).attr("value")).show();
  $("html, body").animate({
    scrollTop: $(".lists").offset().top
  }, '1000', 'swing');
  window.location.hash = "";
  listWindowCheckForPressed();
  $("#livesearch").val("");
  return false;
}

Приветствия.