效果图如下：

 右侧悬浮

<!-- 右侧悬浮组件 --><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代码

const activeIndex = ref(0)
const changeActive = (index) => {activeIndex.value = indexlet CardId = document.querySelector('#card-' + index)//使用平滑属性window.scrollTo({'top': CardId.offsetTop - 70,'behavior': 'smooth'})
}

第二种方法是用vue3的ref。