效果图如下：
右侧悬浮
<!-- 右侧悬浮组件 -->
<div class="right-sort">
<div v-for="(item, index) in list" :key="index" class="sort-item"
:class="index === activeIndex ? 'sort-item-active' : ''"
@click="changeActive(index)"
>
{{item.first_char}}
</div>
</div>左侧内容用id绑定
<n-card :id="'card-' + index" :title="item.first_char" class="mb-3" hoverable>
<n-grid :x-gap="20" :cols="6">
<n-grid-item v-for="(itm, idx) in item.children" :key="idx" class="" @click="handleCreate(itm)">
<div class="sub-item">
<div class="items"><n-avatar round :size="52" :src="itm.cover" /></div>
<div class="items mt-1">{{ itm.car_name }}</div>
</div>
</n-grid-item>
</n-grid>
</n-card>js代码文章来源：https://www.toymoban.com/news/detail-681775.html
const activeIndex = ref(0)
const changeActive = (index) => {
activeIndex.value = index
let CardId = document.querySelector('#card-' + index)
//使用平滑属性
window.scrollTo({
'top': CardId.offsetTop - 70,
'behavior': 'smooth'
})
}第二种方法是用vue3的ref。文章来源地址https://www.toymoban.com/news/detail-681775.html
到了这里，关于vue3中右侧26个英文字母排列，点击字母，平滑到响应内容的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
