点击导航滚动到指定锚点

 

//点击导航铆钉到指定位置             goDetails(index) {                 this.current = index;                 let height = Number(this.$refs['navleft'].offsetHeight)// 导航的高度                 let toTop = this.$refs.single[index].offsetTop  // index对应内容的高度                 let total = index === 0 ? toTop - height - 10 : toTop - height + index - 15　　　　　　　　　　//减去导航的高度和margin-tbottom的高度为滚动高度                 let distance = document.documentElement.scrollTop || document.body.scrollTop                 let step = total / 20                  if (total > distance) {                      let newTotal = total - distance                     step = newTotal / 20                     smoothDown()                 } else {                     let newTotal = distance - total                          step = newTotal / 20                     smoothUp()                 }                 function smoothDown() {                     if (distance < total) {                     distance += step                     document.body.scrollTop = document.documentElement.scrollTop = distance                     setTimeout(smoothDown, 10)                     } else {                     document.body.scrollTop = document.documentElement.scrollTop = total                     }                 }                 function smoothUp() {                     if (distance > total) {                     distance -= step                     document.body.scrollTop = document.documentElement.scrollTop = distance                     setTimeout(smoothUp, 10)                     } else {                     document.body.scrollTop = document.documentElement.scrollTop = total                     }                 }             },

 

来源：博客园

作者：天空的城市

链接：https://www.cnblogs.com/ruoyaozhan/p/11602437.html