时间戳

首页 > 解决方案 > Woocommerce 分页添加锚点

php - Woocommerce 分页添加锚点

问题描述

单击 woocommerce 产品部分中的分页按钮 < 12345 > 时，它会一直跳到页面顶部，用户必须再次向下滚动到产品才能进入下一页产品。

这是我正在尝试使用的代码，它将#catgories 添加到分页链接，但没有跳到锚点，伙计们？

add_filter( 'woocommerce_pagination_args' , 'tq73et_override_pagination_args' );
function tq73et_override_pagination_args( $args ) {
    $args['add_fragment'] = __( '#categories' );
    return $args;
}

标签： phpwordpress

解决方案

您需要使用 jQuery 来滚动或使用 javascript。你可以在 stackoverflow 上找到很多例子。

我将使用 jQuery 作为示例。如果您的网站上没有 jQuery，则必须先加载它 - https://code.jquery.com/。如果需要，您可以将其上传到您的网站或使用 cdn 链接。

所以我们想要动画滚动到我们的页面，所以我们需要获取 html 和 body 并开始向下滚动，直到我们以 1000 毫秒的速度到达具有 id 类别的元素。您可以更改速度，越低越快，越高越慢。

$(function() { 
  $('html, body').animate({
    scrollTop: $('#categories').offset().top}, 1000);
})(jQuery);

另一个例子 - https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

推荐阅读