js原生楼层实现scrollIntoView

1.基于原生Api scrollIntoViewscrollIntoView

用法：element.scrollIntoView(scrollIntoViewOptions);

在循环数组时给标签动态添加class，注意scrollIntoView地位的是到具体一个位置数，所以clas一定是唯一的，用动态id更好

    <!-- 楼层 -->
    <ul class="ul">
      <li v-for="qn in questionnaireList" :key="qn.id" :class="qn.typeName">
        <el-divider>{{
          qn.typeName == 'phone'
            ? '手机'
            : qn.typeName == 'sleep'
            ? '睡眠'
            : qn.typeName == 'health'
            ? '体质'
            : qn.typeName == 'reading'
            ? '读物'
            : '作业'
        }}</el-divider>
        <h2>{{ qn.title }}.{{ qn.name }}</h2>
        <div
          class="items"
          v-for="item in qn.options"
          :key="item.area"
          @click.stop="click(item)"
          @dblclick.stop="sortC(item)"
        >
          <a href="#"> 选项：{{ item.title }}.{{ item.name }} </a>
          <a href="#"> 有效人数：{{ item.amount }} </a>
        </div>
      </li>
    </ul>
    <div id="floor">
      <ul>
        <li
          class="item_floor"
          v-for="item in floorList"
          :key="item.typeName"
          @click.stop="jump(item)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>

2.方法：

  //楼层跳跃
    jump (item) {
      console.log(item);
      let scrollTop = document.getElementsByClassName(item.typeName)[0]
      console.log(scrollTop);
      scrollTop.scrollIntoView({ behavior: "smooth", block: 'start', inline: "nearest" });
    },