You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

在WordPress的Avada主题中如何通过单个按钮触发多个动作(打开Off-Canvas Menu & 返回页面顶部)

在WordPress的Avada主题中如何通过单个按钮触发多个动作(打开Off-Canvas Menu & 返回页面顶部)

嗨,这个需求我之前帮朋友处理过,刚好Avada主题本身就支持自定义代码来实现,给你两个实用的方案,操作起来都不难:

方案一:通过Avada全局自定义JS实现(适合默认的全局头部触发按钮)

这个方案针对的是Avada全局头部里自带的Off-Canvas触发按钮,步骤如下:

  1. 先找到触发按钮的准确选择器:右键点击页面上的触发按钮,选择「检查」,在开发者工具里找到按钮对应的class或者ID(Avada默认的触发按钮一般带fusion-off-canvas-menu-trigger这个class)。
  2. 进入WordPress后台,依次点击「Avada」→「选项」→「自定义代码」→「自定义JavaScript」。
  3. 粘贴下面的代码,记得把选择器替换成你刚才找到的实际内容:
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);
    });
  }
});
  1. 保存设置,刷新页面测试就行。

方案二:针对Avada Builder自定义的触发按钮

如果你的触发按钮是用Avada Builder在页面里手动添加的,操作更简单:

  1. 打开Avada Builder编辑对应的页面/模块,找到那个触发按钮。
  2. 进入按钮的「高级」选项卡,找到「自定义JavaScript」或者「点击事件」(不同Avada版本位置可能略有差异)。
  3. 先确保按钮已经设置了「打开Off-Canvas菜单」的动作(在按钮的「链接/动作」选项里选择对应的Off-Canvas菜单)。
  4. 在自定义JS里粘贴滚动到顶部的代码:
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});
  1. 保存模块和页面,测试效果即可。

几个小提醒

  • 如果你用了缓存插件(比如WP Rocket、LiteSpeed),修改代码后一定要清一下缓存,不然可能看不到新效果。
  • 要是按钮的选择器找不准,直接复制开发者工具里按钮元素的完整class,避免出错。

备注:内容来源于stack exchange,提问作者amanjiang

火山引擎 最新活动