Vue 锚点平滑滚动
代码比较简单,直接上代码:
<span @click="sectionChange(child)"></span> sectionChange(child) { const scrollBox = document.querySelector('.report-detail-module') // 容器 let distance = scrollBox.scrollTop const curTag = document.querySelector('#' + child.sectionCode) // 节点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 } } }
记录进步。