移动端Elementor原生手风琴点击后自动滚动至标题顶部的解决方案

可以通过监听Elementor手风琴的切换事件，在面板展开时自动滚动到对应标题的顶部，以下是具体实现代码：

jQuery(document).ready(function($) {
    // 监听Elementor手风琴的切换事件
    $(document).on('elementor/frontend/accordion/toggle', function(event, widget, isOpen) {
        if (isOpen) {
            // 获取当前展开面板的标题元素
            var accordionTitle = widget.$element.find('.elementor-accordion-title').first();
            // 平滑滚动到标题顶部，预留20px间距避免贴顶
            $('html, body').animate({
                scrollTop: accordionTitle.offset().top - 20
            }, 300);
        }
    });
});

使用说明： #

• 复制上述代码，进入Elementor编辑器，点击页面左下角的「设置」图标 → 「高级」标签 → 「自定义CSS/JS」 → 切换到「JS」面板，粘贴代码后保存更新页面。
• 也可以将代码添加到主题的functions.php（通过wp_enqueue_script），或者使用自定义代码插件（如Code Snippets）添加。

注意事项： #

• 代码中的20是滚动后标题顶部预留的间距，可以根据你的页面布局调整数值。
• 如果你的手风琴有自定义样式修改了类名，需要替换.elementor-accordion-title为实际的标题类名。
• 该代码只在面板展开时触发滚动，折叠时不处理，避免不必要的页面跳动。

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