代码(Javascript)
<template>
<ul class="search-results" :id="'search-results-info'">
<li
class="search-result-item"
v-for="issue,index in issueList"
:key="issue.id"
:id="issue.id"
v-show="!!issueList?.length"
>
<h3 :id="'section-' + index">
{{ issue.title }}
</h3>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
//点击目录跳转页面
handleContentJump(val) {
this.isJump = true;
let sectionIndex = 1;
if(val && this.issueList?.length) {
this.issueList.forEach((issue:any,index:any) => {
if(issue?.data?.answers?.length) {
issue.data.answers.forEach((item:any,index2:any) => {
if(item.content === val) {
sectionIndex = index2;
return;
}
})
}
if(sectionIndex) return;
})
}
if(sectionIndex) {
// 需要跳转的子节点
const ele = document.getElementById('section-' + sectionIndex);
// 父级节点
const parent = document.getElementById('search-results-info');
// 主要依赖这里实现滚动定位
parent.scrollTo({
top: ele.offsetTop,
behavior: 'smooth'
});
//跳转的时候暂停监听页面滚动
setTimeout(() => {
this.isJump = false;
}, 1000);
}
}
}
};
</script>
<style scoped>
</style>
同时,贴上咱的个人博客,欢迎各位来访~
青枫阁