Js实现点击左侧栏，右侧相对于的定位于顶部

关键代码    

//点击导航获取右侧科室(大的科室H1标题)
    let allH1 = document.querySelectorAll(".cur");
  //滚动到对应科室的位置
  allH1[currentIndex.value].scrollIntoView({
    behavior: "smooth", //过渡动画效果
    block: "start", //滚动到位置 默认起始位置
  });

<div class="deparment">
        <div class="leftNav">
          <ul>
            <li
              @click="changeIndex(index)"
              v-for="(deparment, index) in hospitalStore.deparmentArr"
              :key="deparment.depcode"
              :class="{ active: index == currentIndex }"
            >
              {{ deparment.depname }}
            </li>
          </ul>
        </div>
        <div class="deparmentInfo">
          <!-- 用一个div代表:大科室与小科室 -->
          <div
            class="showDeparment"
            v-for="deparment in hospitalStore.deparmentArr"
            :key="deparment.depcode"
          >
            <h1 class="cur">{{ deparment.depname }}</h1>
            <!-- 每一个大的科室下小科室 -->
            <ul>
              <li @click="showLogin(item)" v-for="item in deparment.children" :key="item.depcode" style=" cursor: pointer;">
                {{ item.depname }}
              </li>
            </ul>
          </div>
        </div>
    </div>

.deparment {
    width: 100%;
    height: 500px;
    display: flex;
    margin-top: 20px;
    .leftNav {
      width: 80px;
      height: 100%;
      ul {
        width: 100%;
        height: 100%;
        background: rgb(248, 248, 248);
        display: flex;
        flex-direction: column;
        li {
          flex: 1;
          text-align: center;
          color: #7f7f7f;
          font-size: 14px;
          line-height: 40px;
          cursor: pointer;
          &.active {
            border-left: 1px solid red;
            color: red;
            background: white;
            
          }
        }
      }
    }
    .deparmentInfo {
      flex: 1;
      margin-left: 20px;
      // height: 100%;
      overflow: auto;
      //去除滚动条
      &::-webkit-scrollbar {
        display: none;
      }
      .showDeparment {
        h1 {
          background-color: rgb(248, 248, 248);
          color: #7f7f7f;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            color: #7f7f7f;
            width: 33%;
            line-height: 30px;
          }
        }
      }
    }
  }

js

const currentIndex = ref(0)
//点击左侧
const changeIndex = (i:number) =>{
  currentIndex.value= i
    //点击导航获取右侧科室(大的科室H1标题)
    let allH1 = document.querySelectorAll(".cur");
  //滚动到对应科室的位置
  allH1[currentIndex.value].scrollIntoView({
    behavior: "smooth", //过渡动画效果
    block: "start", //滚动到位置 默认起始位置
  });
}