一个页面中分为多块,例如:目录一、目录二、目录三等,这就需要加上一个锚点导航的需求,提高用户的操作性;
原生的写法:
<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" // 上边框与视窗顶部平齐。默认值
});
},