WordPress Divi主题下按钮控制Tab显示/隐藏滚动异常问题求助

嘿，我之前在Divi主题里也碰到过类似的滚动bug，帮你分析下原因和解决办法：

问题根源 #

你遇到的点击底部按钮后页面滚到Tab区域末尾的问题，基本是这两个原因：

1. 按钮的默认锚点跳转行为没被阻止——如果你的按钮是<a>标签（Divi经常把按钮渲染成带href="#"的a标签），点击时浏览器会默认跳转到页面顶部或者对应锚点，而Tab区域的位置刚好被浏览器判定为锚点目标，就会滚过去。
2. Divi主题自带的JS（比如平滑滚动模块）和你的自定义脚本产生了冲突，干扰了点击事件的执行逻辑。

具体解决方案 #

1. 优先阻止按钮的默认点击行为 #

不管你用原生JS还是jQuery（Divi默认加载jQuery，用它更适配），一定要在点击事件里加上阻止默认行为的代码：

原生JS写法：

document.querySelectorAll('.button').forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 先拦住浏览器的默认跳转行为
    e.preventDefault();
    // 再执行你的Tab显示/隐藏逻辑
    const tab = document.querySelector('.tab');
    tab.classList.toggle('hidden');
  });
});

jQuery写法（更适配Divi）：

jQuery(document).ready(function($) {
  $('.button').on('click', function(e) {
    // 阻止默认锚点跳转
    e.preventDefault();
    // 切换Tab的显示状态
    $('.tab').toggleClass('hidden');
  });
});

2. 修正按钮的HTML属性 #

打开浏览器开发者工具（F12）查看按钮的实际渲染代码，如果看到按钮带href="#"或者data-href这类属性，直接把href改成href="javascript:void(0)"，或者干脆去掉href属性（如果是button标签的话），从根源上避免锚点跳转。

3. 用CSS平滑过渡替代display:none（可选） #

如果是Tab显示/隐藏时页面高度突变导致的滚动，建议用max-height来实现过渡，比直接用display: none更平滑，也能减少页面重绘带来的滚动问题：

.tab {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.tab.active {
  max-height: 1000px; /* 根据你的Tab内容高度调整数值 */
}

然后把JS里的toggle('hidden')改成toggle('active')即可。

4. 排查Divi插件冲突 #

如果上面的方法都没用，试试暂时禁用Divi的平滑滚动功能（在主题设置里找“平滑滚动”选项），或者禁用其他第三方JS插件，看看是不是它们干扰了你的点击事件。

测试方法 #

修改完代码后，刷新页面，先点击顶部按钮，再点击底部按钮，观察是否还会自动滚动。如果还是有问题，可以在开发者工具的控制台里查看有没有报错，根据报错信息进一步排查。

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