先拿到遍历的index值
<ul class="supply-2-wrap">
<li v-for="(item,index) in nav" @click="jump(index)" :class="{supply_2_active:Highlight==index}">{{item}}</li>
</ul>
给要跳转的盒子取对应的类名
js获取窗口和body的滑动高度
jump (index) {
let jump = document.querySelectorAll('.d_jump')
let total = jump[index].offsetTop-100
let distance = document.documentElement.scrollTop || document.body.scrollTop
let step = total / 80
if (total > distance) {
smoothDown()
} else {
let newTotal = distance - total
step = newTotal / 80
smoothUp()
}
function smoothDown () {
if (distance < total) {
distance += step
document.body.scrollTop = distance
document.documentElement.scrollTop = distance
setTimeout(smoothDown, 5)
} else {
document.body.scrollTop = total
document.documentElement.scrollTop = total
}
}
function smoothUp () {
if (distance > total) {
distance -= step
document.body.scrollTop = distance
document.documentElement.scrollTop = distance
setTimeout(smoothUp, 5)
} else {
document.body.scrollTop = total
document.documentElement.scrollTop = total
}
}
},```