打开toggle文本折叠内容时如何阻止页面自动滚动并保持原有位置

根因说明 #

Elementor 官方的Toggle组件内置了展开时自动将内容滚动到视口顶部的默认逻辑，和模态框禁止滚动的场景完全无关，这是触发异常滚动的核心原因。

实现步骤 #

1. 添加自定义JS代码 #

登录WordPress后台，进入「Elementor」→「自定义代码」，新建自定义代码块，选择加载位置为</body>标签前，作用范围设置为对应页面或全站均可，填入以下代码：

// 覆盖Elementor Toggle默认滚动逻辑
document.addEventListener('elementor/frontend/init', () => {
  elementorFrontend.hooks.addAction('frontend/element_ready/toggle.default', ($element) => {
    $element.find('.elementor-tab-title').off('click').on('click', function(e) {
      // 阻止默认滚动逻辑
      e.preventDefault();
      e.stopImmediatePropagation();
      
      const $tab = jQuery(this);
      const $content = $tab.next('.elementor-tab-content');
      const isActive = $tab.hasClass('elementor-active');
      
      // 切换状态
      $tab.toggleClass('elementor-active', !isActive);
      $content.toggleClass('elementor-active', !isActive);
      
      // 处理高度动画，无滚动操作
      if (!isActive) {
        $content.css('maxHeight', $content[0].scrollHeight + 'px');
      } else {
        $content.css('maxHeight', 0);
      }
      return false;
    });
  });
});

注：如果使用的是Elementor手风琴（Accordion）组件，只需将代码里的toggle.default改为accordion.default即可生效。

2. 补充自定义CSS（可选，优化动画效果） #

进入对应页面的Elementor编辑器→页面设置→自定义CSS，或者WordPress外观→自定义→额外CSS，添加以下代码避免展开收起时的跳闪：

.elementor-toggle .elementor-tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 !important;
}
.elementor-toggle .elementor-tab-content.elementor-active {
  padding: 15px 0 !important; /* 可根据设计需求调整内边距数值 */
}

验证步骤 #

添加完成后清空WordPress缓存、CDN缓存和浏览器缓存，重新点击Toggle按钮测试即可看到展开时页面不会发生滚动跳转。

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