jQuery修复WordPress锚点跳转被页面头部遮挡的问题

原有代码核心问题 #

1. 定义的resetScrollpoint函数未绑定到CTA按钮的点击事件，点击按钮时不会触发执行
2. $(".col-nav").css('height')返回的是带px单位的字符串，window.scroll要求传入数值类型参数，直接传入字符串无法生效
3. 滚动逻辑错误：锚点默认跳转已经将目标元素定位到视口顶部，你需要的是向上偏移头部高度，而非直接滚动到头部高度对应的位置
4. WordPress默认启用jQuery无冲突模式，直接使用$调用jQuery会报错

方案1：CSS实现（更推荐，无滚动闪烁） #

无需写JS，直接给目标锚点设置scroll-margin-top属性，浏览器原生支持，性能和体验更好，将以下CSS加入你现有的<style>标签即可：

/* 80px替换为你实际的PC端头部高度 */
#faqs, #let-us-chat, #submit-questions {
  scroll-margin-top: 80px;
}
/* 适配移动端不同的头部高度，数值自行调整 */
@media only screen and (max-width: 576px) {
  #faqs, #let-us-chat, #submit-questions {
    scroll-margin-top: 60px;
  }
}

方案2：修复原有JS代码 #

如果你需要用JS实现，将原有<script>标签里的代码全部替换为以下内容即可：

jQuery(document).ready(function($) {
  // 绑定所有页内跳转CTA按钮的点击事件
  $('a.btn[href^="#"]').on('click', function(e) {
    e.preventDefault();
    const targetId = $(this).attr('href');
    const targetElement = $(targetId);
    if (targetElement.length) {
      // 获取头部高度，自动转数值
      const headerHeight = $('.col-nav').height();
      // 计算正确的滚动位置：目标元素距离页面顶部距离减去头部高度
      const targetScrollPos = targetElement.offset().top - headerHeight;
      // 执行平滑滚动
      $('html, body').animate({
        scrollTop: targetScrollPos
      }, 300);
    }
  });
});

修复说明 #

• 兼容了WordPress的jQuery无冲突模式，不会出现$未定义报错
• 主动绑定按钮点击事件，点击后触发自定义滚动逻辑
• 直接调用.height()方法获取数值类型的头部高度，无需额外处理单位
• 滚动位置计算逻辑正确，确保目标区块不会被头部遮挡
• 新增平滑滚动效果，用户体验更好

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