在WordPress的Avada主题中如何通过单个按钮触发多个动作(打开Off-Canvas Menu & 返回页面顶部)
嗨,这个需求我之前帮朋友处理过,刚好Avada主题本身就支持自定义代码来实现,给你两个实用的方案,操作起来都不难:
方案一:通过Avada全局自定义JS实现(适合默认的全局头部触发按钮)
这个方案针对的是Avada全局头部里自带的Off-Canvas触发按钮,步骤如下:
- 先找到触发按钮的准确选择器:右键点击页面上的触发按钮,选择「检查」,在开发者工具里找到按钮对应的class或者ID(Avada默认的触发按钮一般带
fusion-off-canvas-menu-trigger这个class)。 - 进入WordPress后台,依次点击「Avada」→「选项」→「自定义代码」→「自定义JavaScript」。
- 粘贴下面的代码,记得把选择器替换成你刚才找到的实际内容:
document.addEventListener('DOMContentLoaded', function() { // 替换成你找到的按钮选择器,比如用ID的话就是'#your-trigger-id' const triggerBtn = document.querySelector('.fusion-off-canvas-menu-trigger'); if (triggerBtn) { triggerBtn.addEventListener('click', function() { // 加100ms延迟是为了等Avada的菜单打开动画先启动,滚动动作会更自然 setTimeout(function() { window.scrollTo({ top: 0, behavior: 'smooth' // 想要瞬间跳顶部就改成'auto' }); }, 100); }); } });
- 保存设置,刷新页面测试就行。
方案二:针对Avada Builder自定义的触发按钮
如果你的触发按钮是用Avada Builder在页面里手动添加的,操作更简单:
- 打开Avada Builder编辑对应的页面/模块,找到那个触发按钮。
- 进入按钮的「高级」选项卡,找到「自定义JavaScript」或者「点击事件」(不同Avada版本位置可能略有差异)。
- 先确保按钮已经设置了「打开Off-Canvas菜单」的动作(在按钮的「链接/动作」选项里选择对应的Off-Canvas菜单)。
- 在自定义JS里粘贴滚动到顶部的代码:
window.scrollTo({ top: 0, behavior: 'smooth' });
- 保存模块和页面,测试效果即可。
几个小提醒
- 如果你用了缓存插件(比如WP Rocket、LiteSpeed),修改代码后一定要清一下缓存,不然可能看不到新效果。
- 要是按钮的选择器找不准,直接复制开发者工具里按钮元素的完整class,避免出错。
备注:内容来源于stack exchange,提问作者amanjiang




