element步骤条增加锚点的实现

element的步骤条默认样式是无法点击的,需求中有点击步骤条,页面滚动到特定锚点需求,实现如下

 <el-card shadow="never" :body-style="{ padding: '5px' }"  id="mySteps">
            <el-steps simple>
              <el-step v-for="(step,index) in laSteps" :title="step.title" :icon="step.icon"
                       :key="index"
                       :href="step.href" :status="step.status" v-if="step.isShow"></el-step>
            </el-steps>
          </el-card>

1. 每个步骤条中 :href=“step.href” 锚点是通过一个href与一个id实现跳转,这里的href仅仅作为一种标识与需要跳转的点id相同即可

   $('.el-step__title').click(function () {
        var goHref = '#' + $(this).parent().parent().attr('href')
        var anchor = that.$el.querySelector(goHref)
        $('#djla').animate({
          scrollTop: anchor.offsetTop
        }, 500);
      });

2. 获取到href的值,根据这个值决定跳转到什么地方.
3. $(’#djla’)为jq选中整个需滚动区域