WooCommerce：在分类页标题后添加跳转至页面主体的按钮

核心思路 #

通过锚点跳转实现按钮直达产品表格区域，再借助模板复用逻辑让所有分类页自动生效。

步骤1：给产品表格区域设置锚点ID #

找到产品表格的父容器（或表格本身），给它添加一个唯一ID，方便锚点定位：

<div id="product-section">
  <!-- 产品表格代码 -->
  <table>...</table>
</div>

步骤2：在分类标题后添加跳转按钮 #

在分类页标题末尾插入跳转按钮，通过锚点链接指向产品区域的ID：

方案A（带平滑滚动，用JS实现）

<h1>数码配件分类</h1>
<button onclick="document.getElementById('product-section').scrollIntoView({behavior: 'smooth'})" class="jump-btn">
  直达产品列表
</button>

方案B（纯HTML锚点，无JS）

<h1>数码配件分类 <a href="#product-section" class="jump-btn">直达产品列表</a></h1>

步骤3：批量应用到所有分类页 #

如果你的网站使用模板系统（CMS分类模板、前端框架组件、静态站点生成器布局），只需把按钮代码写入分类页的通用模板中：

• 比如WordPress：编辑category.php，在标题输出代码后插入按钮HTML
• 比如Hexo/Hugo：修改分类页的布局模板，添加按钮代码
  所有分类页会自动继承这个模板逻辑，无需逐个页面修改。

可选优化：全局平滑滚动 #

如果用纯HTML锚点方案，想添加平滑滚动效果，只需在全局CSS中加入一行：

html {
  scroll-behavior: smooth;
}

内容的提问来源于stack exchange，提问作者Conor Beecham