无动画
goAnchor(selector){ //selector 是节点id:'anchor-'+index
document.querySelector("#app-root").scrollTop = Number(this.$el.querySelector('#'+selector).offsetTop)-155;
}
有动画
goAnchor(selector) { //selector 是节点id:'anchor-'+index
const scrollBox = document.querySelector('#app-root') // 容器
let distance = scrollBox.scrollTop
const curTag = document.querySelector('#' + selector) // 节点tag
const offsetTop = curTag.offsetTop - 120 // 滚动距离
let step = offsetTop / 50
if (offsetTop > distance) {
smoothDown()
} else {
const newTotal = distance - offsetTop
step = newTotal / 50
smoothUp()
}
scrollBox.scrollTop = offsetTop
function smoothDown() {
if (distance < offsetTop) {
distance += step
scrollBox.scrollTop = distance
setTimeout(smoothDown, 10)
} else {
scrollBox.scrollTop = offsetTop
}
}
function smoothUp() {
if (distance > offsetTop) {
distance -= step
scrollBox.scrollTop = distance
setTimeout(smoothUp, 10)
} else {
scrollBox.scrollTop = offsetTop
}
}
}
关于点击顶部菜单会滚动到对应点击菜单的地方,滚动到对应的地方顶部菜单也会自动显示当面区域的菜单为选中效果,互相联动
请参考这篇文章 https://blog.csdn.net/sumimg/article/details/136699897