使用cferdinandi smooth-scroll库时锚点类被移除的问题求助

我之前也碰到过一模一样的问题——cferdinandi的smooth-scroll确实会在处理锚点元素时，意外移除自定义的样式类，包括你这个ancre类。下面是几个我亲测有效的解决办法：

方法一：用smooth-scroll的回调函数恢复类 #

smooth-scroll自带了after回调钩子，会在滚动动画完成后触发。我们可以利用它重新给锚点元素加上ancre类，完全不影响原有功能：

// 初始化smooth-scroll时添加after回调
const scroll = new SmoothScroll('a[href*="#"]', {
  after: function(anchor, toggle) {
    // 确认目标锚点存在，且当前没有ancre类时添加
    if (anchor && !anchor.classList.contains('ancre')) {
      anchor.classList.add('ancre');
    }
  }
});

这个方案的优势是不用改动你CMS生成的锚点结构，只需要调整初始化代码就行，非常省心。

方法二：调整锚点的DOM结构（如果CMS允许） #

如果你的CMS支持直接把锚点绑定到内容元素上（比如标题、段落块），可以把id和ancre类合并到同一个元素上，比如：

<h2 id="authentication" class="ancre">Authentication</h2>

smooth-scroll的核心逻辑是处理滚动定位，一般不会移除这类内容元素的自定义样式类，这样从根源上避免了类被移除的问题。

方法三：修改源码（不推荐） #

如果你实在不想用回调，也可以直接修改smooth-scroll的源码，找到它处理目标元素时移除类的代码段，注释掉对应逻辑。但这个方法不建议，因为后续库版本更新会覆盖你的修改，维护成本很高。

为什么会出现这个问题？ #

smooth-scroll内部在处理锚点时，会对目标元素做一些标准化处理，比如清理临时的定位类，但有时候会误把自定义的样式类也当成临时类移除了。用回调恢复是最稳妥的兼容方案。

内容的提问来源于stack exchange，提问作者Quentin Beau Kwint