方法1：用 JavaScript 监听点击，滚动到 class 元素

假设你有这样的 HTML：

<div class="section1">第一部分内容</div>
<div class="section2">第二部分内容</div>

<a href="#jump1">跳到第一部分</a>
<a href="#jump2">跳到第二部分</a>

用 JS 实现点击链接跳转：

<script>
document.querySelectorAll('a[href^="#jump"]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转
    let targetClass = this.getAttribute('href').substring(5); // 去掉 #jump
    let targetElement = document.querySelector('.' + targetClass); // 找 class
    if(targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动
    }
  });
});
</script>

配合 CSS 设置高度方便测试：

.section1, .section2 {
  height: 500px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

解释：

• scrollIntoView({ behavior: 'smooth' }) 可以滚动到元素位置并平滑滚动。

• 链接 href="#jump1" 对应 .section1 类，#jump2 对应 .section2 类。

方法2：动态给元素设置 id

如果你只想用 class，但想利用原生锚点功能，可以在页面加载时 JS 自动给 class 元素生成 id：

<script>
document.querySelectorAll('.section1, .section2').forEach((el, index) => {
  el.id = 'section' + (index + 1);
});
</script>

然后你的链接可以直接写：

<a href="#section1">跳到第一部分</a>
<a href="#section2">跳到第二部分</a>

效果和原生 id 一样，但你不用手动给每个元素加 id。

💡 总结：

• HTML 的原生锚点只能用 id。

• 如果只有 class，必须用 JS 控制滚动，或者动态给 class 元素生成 id。

• 推荐方法：动态生成 id，保持 HTML 语义清晰，同时兼容原生锚点。