能否使用HTML中的类实现同页面不同区块的按钮跳转？

原生HTML的内置锚点跳转机制不支持直接通过类名触发同页区块跳转，你之前尝试在href中写.类名的写法失效，是因为浏览器解析#开头的锚点值时，只会匹配全局唯一的对应ID属性的元素，不会识别CSS类选择器的语法规则。如果非要通过类名作为跳转关联标识，完全可以通过少量JavaScript逻辑实现等效效果。

浏览器对href属性中#开头的内容有固定解析逻辑：

• 拿到#后面的字符串后，会直接在页面中查找id属性值和这个字符串完全一致的元素
• 它不会解析任何CSS选择器语法，你写的.card会被当成“寻找id为'.card'的元素”的指令，而页面中根本不存在带这个ID的元素，自然没有跳转效果

类选择器本身只是JS可以用来批量匹配元素的规则，需要通过JS把类的匹配结果和浏览器的滚动跳转能力结合起来，完整可落地的实现步骤如下：

1. 给所有需要被跳转定位的目标区块，添加统一的类名（类名不要求全局唯一，多个区块可以共用同一个类）
2. 给所有触发跳转的按钮/链接元素，加上用于绑定事件的类名，同时通过自定义属性标记要匹配的目标类名
3. 编写少量JS逻辑：监听触发元素的点击事件，通过类选择器定位目标区块，调用浏览器原生滚动API完成跳转定位

可直接复用的实现代码 #

HTML结构示例：

<!-- 触发跳转的按钮 -->
<a class="jump-btn" data-target=".signup-section">点击跳转至注册区块</a>

<!-- 目标区块：仅通过类标记，无需单独配置ID -->
<div class="signup-section">
  这里是注册区块的内容
</div>

对应JS逻辑示例：

// 批量给所有带jump-btn类的触发元素绑定点击事件
document.querySelectorAll('.jump-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    // 阻止a标签默认的锚点跳转行为，避免页面报错
    e.preventDefault();
    // 读取自定义属性中存储的目标类名
    const targetSelector = btn.dataset.target;
    // 通过类选择器定位目标元素
    const targetElement = document.querySelector(targetSelector);
    // 匹配到目标后执行滚动跳转
    if (targetElement) {
      targetElement.scrollIntoView({
        behavior: 'smooth', // 改为auto可实现原生瞬间跳转效果
        block: 'start'
      });
    }
  })
})

• 如果同一个类名对应了页面中的多个元素，document.querySelector()只会匹配DOM结构中第一个带该类的元素，如果需要跳转到指定的某一个目标，需要补充更精准的选择器规则（比如加父级类限定范围）
• 不要试图在href中写类名相关的内容，哪怕加了JS逻辑，浏览器的原生解析流程依然会先尝试寻找对应ID的元素，容易引发页面异常跳转或控制台报错
• 如果不需要JS交互的同页跳转，优先使用原生ID锚点的实现方式，性能更好也更稳定

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