使用Flickity开发项目时锚点跳转标签故障求助

嘿，我帮你排查了代码里的问题，找到了这两个bug的根源，给你对应的修复方案：

问题1：只有第一个section的锚点标签显示 #

问题原因 #

你的.scrollDown用了position: absolute定位，但它的父容器（#homeSection1、#homeSection2、#homeSection3这些section）没有设置position: relative。这就导致所有的.scrollDown都相对于整个页面body定位，全部叠在同一个位置，看起来就只有第一个能显示出来。

修复方案 #

在你的CSS里加上这段代码，给每个section设置相对定位：

#homeSection1, #homeSection2, #homeSection3 {
  position: relative;
}

这样每个.scrollDown就会乖乖待在各自section的底部，不会再互相叠加了。

问题2：所有锚点都跳转到最后一个section #

问题原因 #

我发现代码里有两处问题导致了这个现象：

1. 锚点链接写错了：第三个section里的锚点居然指向了自己（href="#homeSection3"），虽然第二个section的锚点指向#homeSection3是符合1→2→3逻辑的，但第一个section的锚点指向#homeSection2却失效了，这是因为第二处问题——
2. 重复初始化Flickity：你在JS里两次初始化了Flickity，而且都是用.main-carousel选择器，这会让后面的初始化覆盖前面的实例，干扰了页面布局和锚点的正常定位逻辑。

修复方案 #

1. 修正锚点链接：把第三个section的锚点改成回到顶部（或者直接隐藏，毕竟已经是最后一个section了），比如：

<div class="scrollDown">
  <a class="nextSection" href="#top">
    <i class="fas fa-chevron-up scrollDownArrow"></i>
    <p>Back to Top</p>
  </a>
</div>

顺便提一句：三个箭头的id="scrollDownArrow"重复了，id必须是唯一的，改成class会更规范哦。

2. 清理重复的Flickity初始化：删掉多余的初始化代码，推荐给每个carousel单独初始化，或者用循环批量处理，这样更清晰：

// 批量初始化所有carousel，避免重复代码
document.querySelectorAll('.main-carousel').forEach(carousel => {
  new Flickity(carousel, {
    cellAlign: 'left',
    contain: true,
    autoPlay: 6000
  });
});

另外你在HTML里已经用data-flickity设置了autoPlay，所以JS里可以不用重复设置，二选一就行，避免冲突。

这样修改之后，两个问题应该都能解决啦！

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