如何制作Elementor Sticky Scroll Down Button实现点击逐次跳转单页所有分区

步骤1：给目标分区设置统一标记 #

• 打开Elementor编辑器，逐个选中你需要按顺序跳转的页面分区（Section）
• 进入分区的「高级」选项卡，在「CSS ID」栏按顺序填写统一前缀加序号，比如section-1、section-2、section-3，所有需要遍历的分区都按这个规则命名，不要漏也不要跳号

步骤2：添加粘性按钮组件 #

• 拖拽一个「按钮」组件放到页面任意位置，建议放在页面右侧或者底部居中的位置，按钮文案可以写「下一部分」或者直接用向下箭头图标
• 进入按钮的「高级」选项卡，找到「粘性」选项，选择「始终」，然后调整位置的上下左右边距，让按钮固定在你想要的位置不随滚动消失
• 同样在「高级」选项卡，给这个按钮设置自定义CSS ID为next-section-btn

步骤3：添加自定义JS代码实现跳转逻辑 #

• 回到Elementor编辑器的页面设置（左下角齿轮图标），进入「自定义代码」选项，把下面的JS代码粘贴到「页脚代码」区域，保存后更新页面即可生效

// 初始化当前所在分区序号
let currentSection = 0;
// 统计所有要跳转的分区总数
const sectionCount = document.querySelectorAll('[id^="section-"]').length;

document.querySelector('#next-section-btn').addEventListener('click', function(e) {
  e.preventDefault();
  // 每点击一次序号+1
  currentSection++;
  // 如果已经到最后一个分区，跳回第一个分区（不需要循环跳转可删除这三行）
  if(currentSection >= sectionCount) {
    currentSection = 0;
  }
  // 平滑滚动到对应分区
  document.querySelector(`#section-${currentSection}`).scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });
});

注意事项 #

• 分区的ID命名必须严格遵循你设定的前缀+序号的规则，如果你自定义前缀为part-，需要同步把JS代码里的section-也改成part-，保证匹配规则一致
• 如果点击无反应，检查按钮的自定义ID是否和代码里的next-section-btn完全一致
• 不需要安装额外插件，所有操作都用Elementor自带功能即可完成

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