时间戳

首页 > 解决方案 > 如何在 PHP 代码中添加“滚动效果”？

php - 如何在 PHP 代码中添加“滚动效果”？

问题描述

情况：我有一个功能齐全的 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>

标签： phpwordpress

解决方案

我分析了您与 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;
}

干杯。

推荐阅读