Vue3+Typescript+setup / Vue2使用scrollIntoView（）实现锚点跳转指定列表

在标签上添加ref属性来引用DOM元素，

Vue2中使用$refs来获取该DOM元素并调用scrollIntoView()方法。

使用ref="yearDiv"在每个年份的div元素上添加了一个引用。然后，在yearClick方法中，我们通过this.$refs.yearDiv[year]来获取对应年份的div元素，并调用scrollIntoView()方法来将该元素滚动到可见区域。方法如下：

yearClick(year) {

this.typeStyle = year;

const yearDiv = this.$refs.yearDiv[year];

yearDiv.scrollIntoView({ behavior: 'smooth' });

},

Vue3和Typescript实现锚点跳转的示例代码：

需要在Vue组件中更新HTML模板中添加data-year属性，该属性的值是对应的年份，使用document.querySelector函数来获取带有相应data-year属性值的div元素，并将其滚动到可见区域。

:data-year="year"

ref="yearDivs 

:class="{ rightActive: typeStyle === year }" //悬浮高亮

  <div class="year-time">
          <ul class="yearList" ref="yearList">
            <li v-for="year in years" :key="year" :class="{ active: typeStyle === year }" @mouseover="yearClick(year)"
             >
              {
  { year }}
            </li>
          </ul>
          <ul class="right-content">
            <div v-for="year in years" :key="year" :class="{ rightActive: typeStyle === year }" :data-year="year" ref="yearDiv">
              <li v-for="item in contents[year]">{
  { item }}</li>
            </div>
          </ul>
        </div>

// 年份列表
const years = ['2019', '2020', '2021', '2022', '2023']
// 每个年份对应的内容
const contents: Record<string, string[]> = {
  '2019': ['06月 一 ....'],
  '2020': ['03月 一 AI......'],
  '2021': ['03月 一 深入........'],
  '2022': ['06月 一 建设布..........'],
  '2023': ['05月 一 上线....','08月 一 启动安全....','09月 一 推出....']
}

const typeStyle = ref('2019')
const yearClick = (year: string) => {
  typeStyle.value = year;
  const yearDiv = document.querySelector(`[data-year="${year}"]`) as HTMLElement;
  yearDiv?.scrollIntoView({ behavior: 'smooth' });
  console.log(yearDiv, 'yearDiv');

};

css样式

    .year-time {
        display: flex;
        padding-top: 30px;
        padding-left: 80px;
        justify-content: space-between;

        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
        }

        .yearList {
          width: 100px;

          li {
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
          }
        }

        .right-content {
          width: calc(100% - 100px);
          height: 400px;
          overflow: auto;
          padding-left: 80px;
          padding-right: 20px;
          scrollbar-width: thin;
          scrollbar-color: #bbb transparent;
          font-size: 14px;
        }

        .right-content::-webkit-scrollbar {
          width: 6px;
        }

        .right-content::-webkit-scrollbar-track {
          background-color: transparent;
        }

        .right-content::-webkit-scrollbar-thumb {
          background-color: #bbb;
          border-radius: 3px;
        }

       

        .right-content li {
          margin-bottom: 20px;
        }
        .active {
          background-color: #007aff;
          color: #fff;
        }

        .rightActive {
          font-weight: 700;
          font-size: 16px;
          color: #4391f1;
        }

      }