Vue —— 锚点导航

一个页面中分为多块，例如：目录一、目录二、目录三等，这就需要加上一个锚点导航的需求，提高用户的操作性；

原生的写法：

<div class="wrapper">
  <ul>
    <li><a href="#catalogue1">目录一</a></li>
    <li><a href="#catalogue2">目录二</a></li>
    <li><a href="#catalogue3">目录三</a></li>
  </ul>
  <div id="catalogue1">
    <h2>目录一</h2>
  </div>
  <div id="catalogue2">
    <h2>目录二</h2>
  </div>
  <div id="catalogue3">
    <h2>目录三</h2>
  </div>
</div>

vue写法：scrollIntoView

<v-card
  class="mx-auto"
  min-width="140"
  tile
  style="position:fixed;top:160px;right:0px;"
  v-if="navigations.length > 0"
  elevation="0"
>
  <v-list dense>
    <v-list-item-group color="primary">
      <v-list-item v-for="item in navigations" :key="item.id">
        <v-list-item-content @click="anchor(item.id)">
          <v-list-item-title>
            {{ item.name }}
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list-item-group>
  </v-list>
</v-card>


anchor(id) {
 document.getElementById(id).scrollIntoView({
    behavior: "smooth", // 平滑过渡
    block: "start" // 上边框与视窗顶部平齐。默认值
  });
},