WordPress中绑定双事件的CTA按钮点击后页面回滚至顶部问题

问题背景 #

WordPress页面的CTA按钮绑定了两个点击事件：

1. 通过jQuery点击事件显示隐藏的HubSpot表单容器（默认display:none）
2. 通过内联onclick调用resetScrollpoint函数滚动到表单位置

实际点击按钮后页面直接回滚到顶部，只有移除表单容器的display:none样式后，功能才能正常工作。

根本原因 #

1. 隐藏元素无法获取正确位置：设置display:none的元素，jQuery的offset().top会返回0，导致resetScrollpoint函数计算出的滚动位置为0 - 头部高度，最终页面滚到顶部。
2. 事件执行顺序冲突：内联onclick事件会优先于jQuery绑定的click事件触发，此时表单容器还未被显示，自然拿不到正确的位置值。

解决方案 #

方案1：合并事件逻辑（推荐） #

移除内联onclick，将显示表单和滚动逻辑合并到同一个jQuery点击事件中，确保先显示表单再计算滚动位置。

修改按钮HTML（移除内联onclick）

<a id="btn" class="btn" role="button" href="javascript:void(0)" target="<?php echo $link['target']; ?>" title="<?php echo $link['title']; ?>">
    <?php echo $link['title']; ?>
</a>

修改JS代码

jQuery(document).ready(function ($) {
    $("#btn").click(function (e) {
        e.preventDefault(); // 阻止a标签默认行为
        const $formContainer = $("#contact-form-wrap");
        
        // 先显示表单容器，确保能获取正确位置
        $formContainer.show();
        
        // 计算滚动目标位置：表单顶部 - 头部高度
        const targetScrollTop = $formContainer.offset().top - $('#header').height();
        
        // 执行滚动
        window.scrollTo(0, targetScrollTop);
    });
});

方案2：修复滚动函数并调整事件顺序 #

如果需要保留原有函数结构，可修改resetScrollpoint函数，确保获取位置前元素可见，同时调整事件触发顺序。

修改resetScrollpoint函数

function resetScrollpoint(selector) {
  if(!selector) return false;
  
  const $element = $(selector);
  const isHidden = $element.is(':hidden');
  
  // 临时显示元素以获取正确位置（如果原本隐藏）
  if(isHidden) {
      $element.show();
  }
  
  // 计算滚动位置
  const targetScrollTop = $element.offset().top - $('#header').height();
  
  // 如果之前是隐藏状态，暂时恢复隐藏（后续由点击事件显示）
  if(isHidden) {
      $element.hide();
  }
  
  // 执行滚动
  window.scrollTo(0, targetScrollTop);
}

调整jQuery点击事件（确保先显示再触发滚动）

jQuery(document).ready(function ($) {
    $("#btn").click(function () {
        $("#contact-form-wrap").show();
        // 直接调用滚动逻辑，避免内联事件的顺序问题
        resetScrollpoint('#contact-form-wrap');
        return false;
    });
});

同时记得移除按钮HTML中的onclick="resetScrollpoint('#contact-form-wrap')"属性，避免重复触发。

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