如何解决jQuery slideToggle()触发的页面滚动问题？

先修正代码中的基础错误 #

你当前代码存在选择器与ID不匹配的问题，这是触发滚动的核心原因之一：

• jQuery里绑定的是.rv_button1，但HTML按钮的类是.rv_button
• jQuery操作的是#reveal1，但HTML中要切换的区块ID是#reveal

滚动问题的具体解决方法 #

方法1：修正JS代码，固定滚动位置

修正选择器后，在slideToggle动画前后记录并恢复滚动位置，同时阻止事件冒泡避免Divi主题默认行为干扰：

jQuery(function($) {
    $('.rv_button').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        // 记录点击时的滚动位置
        const currentScroll = $(window).scrollTop();
        $('#reveal').slideToggle(function() {
            // 动画结束后恢复原滚动位置
            $(window).scrollTop(currentScroll);
        });
        $(this).toggleClass('opened closed');
    });
});

方法2：用CSS过渡替代JS动画（更稳定）

相比slideToggle的JS动画，CSS过渡不会触发浏览器自动滚动调整，适配Divi这类主题的兼容性更好：

1. 添加自定义CSS：

#reveal {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
#reveal.active {
    max-height: 2000px; /* 设置一个大于内容实际高度的值即可 */
}

2. 替换JS代码：

jQuery(function($) {
    $('.rv_button').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        $('#reveal').toggleClass('active');
        $(this).toggleClass('opened closed');
    });
});

额外注意事项 #

• 确保自定义JS在jQuery之后加载（WordPress中可通过wp_enqueue_script设置依赖为jquery）
• Divi的按钮模块可能自带点击事件，e.stopPropagation()可以避免冲突

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