如何为步进器中的circle类div元素添加锚点实现跳转？

要让步进器的圆形元素成为可点击锚点，直接跳转到对应步骤内容，有两种简单可行的实现方式：

方法一：纯HTML+CSS实现（推荐静态页面） #

1. 修改HTML结构 #

把每个圆形步进器包裹在<a>标签中，href属性指向对应步骤内容的ID：

<!-- 步进器部分 -->
<a href="#step-content-1" class="circle-anchor">
  <div id="step-1" class="circle">
    <div class="line"></div>
  </div>
</a>
<a href="#step-content-2" class="circle-anchor">
  <div id="step-2" class="circle">
    <div class="line"></div>
  </div>
</a>

<!-- 对应步骤内容 -->
<div id="step-content-1">
  这里是步骤1的具体内容
</div>
<div id="step-content-2">
  这里是步骤2的具体内容
</div>

2. 调整CSS样式 #

确保只有圆形区域可点击，同时优化视觉提示：

/* 重置锚点标签默认样式 */
.circle-anchor {
  display: inline-block;
  text-decoration: none;
}

/* 原circle样式调整，添加相对定位和点击光标 */
.circle {
  height: 16px;
  width: 16px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
  position: relative; /* 让内部line相对自身定位 */
  cursor: pointer; /* 提示用户可点击 */
}

/* 禁止线条区域触发点击事件，确保只有圆形可点击 */
.line {
  width: 100%;
  height: 9px;
  margin-left: 16px;
  border-bottom: 2px solid lightgrey;
  position: absolute;
  display: block;
  pointer-events: none;
}

/* 可选：添加平滑滚动效果 */
html {
  scroll-behavior: smooth;
}

方法二：JavaScript实现（适合需要自定义逻辑的场景） #

如果需要在跳转前执行额外逻辑（比如验证、过渡动画），可以用JS实现：

1. 修改HTML结构 #

给每个圆形元素添加data-target属性，指定对应步骤内容的选择器：

<div id="step-1" class="circle" data-target="#step-content-1">
  <div class="line"></div>
</div>
<div id="step-2" class="circle" data-target="#step-content-2">
  <div class="line"></div>
</div>

<!-- 对应步骤内容 -->
<div id="step-content-1">
  这里是步骤1的具体内容
</div>
<div id="step-content-2">
  这里是步骤2的具体内容
</div>

2. 添加JavaScript代码 #

监听圆形元素的点击事件，触发滚动跳转：

// 获取所有步进器圆形元素
const stepCircles = document.querySelectorAll('.circle');

stepCircles.forEach(circle => {
  circle.addEventListener('click', function() {
    // 获取目标步骤的选择器
    const targetSelector = this.dataset.target;
    const targetElement = document.querySelector(targetSelector);
    
    if (targetElement) {
      // 平滑滚动到目标元素
      targetElement.scrollIntoView({ behavior: 'smooth' });
      // 更新URL锚点（可选）
      window.location.hash = targetSelector.replace('#', '');
    }
  });
});

3. 补充CSS样式 #

同样需要添加点击提示和禁止线条触发点击：

.circle {
  /* 保留原有样式 */
  cursor: pointer;
  position: relative;
}

.line {
  /* 保留原有样式 */
  pointer-events: none;
}

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